2

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

我试图模仿的是在这个页面上看到的 3 个 div 的行：http ://www.theremixologists.com/props - 我只是不知道如何像他们一样指定每行 3 个内容内联块有名字（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 块实际上是表格，还是网格模块？任何帮助，将不胜感激！谢谢

编辑：用 Firebug 检查他们的页面向我展示了每个块的这个片段：

.fullwidth .one_third{width:256px;}

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

4

2 回答 2

2

我不确定你在这里想要什么，我假设你想要制作所有 3 个 divinline而你只是制作 1 as 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>
于 2012-11-26T20:37:18.977 回答
0

这是他们正在做的事情

<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;
}
于 2012-11-26T20:38:26.920 回答