css - 如何在行中制作 DIV 内联 block ？

Question

我想要完成的是我的新手 - CSS 定位。就 HTML/CSS 而言，我在 Codecademy.com 学到了很多东西，但对于 Joomla 的模板我有点困惑。

我试图模仿的是 3 个 div 的行，就像在这个页面上看到的那样:http://www.theremixologists.com/props - 我只是不知道如何指定每行 3 个内容内联 block ，例如它们的名称(Alicia 和 Mat、Richard 和 Jennifer、Kirsten 和 Jon)- 3 个 | 5 下

这是我要复制的模型:

http://i.imgur.com/qzPQO.jpg

3 个 div，然后是下面的新行 div。

到目前为止，我假设我应该做的是:

通过所见即所得编辑器粘贴到特定 Joomla 页面的 HTML 示例代码(我将把这段代码添加到通用 Joomla 创建的页面):

<div class="box_row1">  
<p>This is sample text for the first content box</p>  
</div>  
<div class="box">  
<p>This is sample text for the second content box</p>  
</div>  
<div class="box">  
<p>This is sample text for the third content box</p>  
</div>

然后 CSS 将被粘贴到 custom.css(用于模板):

.box_row1 {  
 display: inline-block;  
 height: 100px;  
 width: 100px;  
 border-radius: 6px;  
 margin: 10px 10px 10px 10px;  
 }  

然后为第二行和第三行创建类(但如何使它们成为行)？

我只是不确定如何开始新的 3 div 行。 CSS 定位本身就是一门科学。那些 3x15 block 实际上是 table ，还是网格模块？任何帮助，将不胜感激!谢谢

编辑:用 Firebug 检查他们的页面会显示每个 block 的这个片段:

.fullwidth .one_third{width:256px;}

我只是不明白如何制作成行的 div。 CSS 定位让我很困惑，哈哈。叹息。

Answer 1

我不确定你在这里想要什么，我假设你想制作所有 3 div 的 inline 而你只是制作 1 作为 inline，这不是地方一个 positioning 问题，这是一个 display 问题，所以给你的每个 div 一个通用类，比如

.div_common {  
 display: inline-block;  
 height: 100px;  
 width: 100px;  
 border-radius: 6px;  
 margin: 10px 10px 10px 10px;  
}  

<div class="div_common">  
 <p>This is sample text for the first content box</p>  
</div>  
<div class="div_common">  
 <p>This is sample text for the second content box</p>  
</div>  
<div class="div_common">  
 <p>This is sample text for the third content box</p>  
</div>