css - 如何使 DIV 成行内联 block ？

Question

我想要完成的是我不熟悉的事情 - CSS 定位。我在 Codecademy.com 上学到了很多 HTML/CSS 方面的知识，但对于 Joomla 的模板我有点困惑。

我试图模仿的是 3 个 div 的行，如本页所示:http://www.theremixologists.com/props - 我只是不知道如何指定每行 3 个内容内联 block ，就像它们的名称一样(Alicia & Mat、Richard & Jennifer、Kirsten & Jon) - 3 across | 5 下

这是我试图复制的模型:

/image/vQpDd.jpg

跨过 3 个 div，然后在下面添加新的 div 行。

到目前为止，我认为我应该做的是以下事情:

通过 WYSIWYG 编辑器粘贴到特定 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{宽度:256px;}

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

Answer 1

我不确定你在这里想要什么，我假设你想让所有 3 个 div 都内联，而你只是将 1 作为内联，这不是地方一个定位问题，这是一个显示问题，因此为每个div提供一个公共(public)类，例如

.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>