Question

我需要在id2下面显示id3，而不是在侧面显示？

如何使用CSS完成它？

HTML

<div class="main" ></div>
<div id="id1">Im in div1</div>
<div id="id2">Im in div2</div>
<div id="id3">Im in div3</div>
<div></div>

CSS

#id1{
    background-color:green;
    width:30%;  
    height:200px;
    border:100px;   
    float:left;
}

#id2{
    background-color:red;
    width:20%;  
    height:100px;
    border:100px;   
    float:left;
}

#id3{
    background-color:yellow;
    width:10%;  
    height:300px;
    border:100px;   
    float:left;
}

http://jsfiddle.net/w9xPP/

Answer 1

最好的方法是不使用花车。使用它们的唯一原因是使事物与其他事物保持水平。如果你想让事情像谜题一样融合在一起，请看masonry.js

Answer 2

在clear: left;上设置#id3

#id3{
clear: left;
background-color:red;
width:20%;  
height:100px;
border:100px;   
float:left;
}

使用float时，它告诉后续元素尝试显示在它们旁边而不是下面。使用clear清除浮动并消除该行为。

http://jsfiddle.net/w9xPP/1/

Answer 3

听起来你可能正在尝试做列。 @Diodeus对UL和LI是正确的。您可能希望重构该代码。但是，如果您尝试使用两列元素，则可以将元素包装在div中并浮动它们而不是它们包含的项目。然后，您的子元素将放置在浮动列中。您可能还想查看一个网格系统，例如960 Grid或Twitter Bootstrap。

在css中对元素进行分组并在其他下方显示一个元素

3 个答案: