Question

我正在努力实现的是我新手 - CSS定位。我在Codecademy.com上学到了很多HTML / CSS，但是对于Joomla的模板，我有点困惑。

我想模仿的是这个页面上显示的3个div的行：http://www.theremixologists.com/props - 我只是不知道如何为每行指定3个内联块，就像它们如何命名一样（Alicia＆amp; Mat，Richard＆amp; Jennifer，Kirsten＆amp; Jon） - 3跨越| 5下来

这是我正在尝试复制的模型：

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

3 divs，然后是div的新行。

到目前为止，我假设我应该做的是以下内容：

HTML示例代码通过WYSIWYG编辑器粘贴到特定的Joomla页面中（我将这个代码添加到一个通用的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的实际上是桌子，还是网格模块？任何帮助，将不胜感激！谢谢

编辑：使用Firebug检查他们的页面显示每个块的这个snippit：

.fullwidth .one_third {width：256px;}

我只是不明白如何制作div行。 CSS定位让我很困惑。 Le Sigh。

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>

Answer 2

这是他们正在做的事情

<div class="big_box">
    <div class="box">  
        <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>
</div>
<div class="clear"></div>

现在是css

.clear {
    clear:both;
}
.big_box {
    width:600px;
}
.big_box .box {
    float:left;
    width:196px;
}

如何在行中生成DIV内联块？

2 个答案: