1

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

如何在使用 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/

4

3 回答 3

1

最好的方法是不使用浮点数。使用它们的唯一原因是使事物与其他事物水平。如果你想让事情像拼图一样组合在一起，请查看masonry.js

于 2013-08-12T18:40:20.573 回答
0

听起来你可能正在尝试做专栏。@Diodeus 关于 UL 和 LI 是正确的。您可能想要重构该代码。但是，如果您尝试拥有两列元素，则可以将元素包装在 div 中并浮动它们而不是它们包含的项目。然后，您的子元素将被放置在浮动列中。您可能还想查看像960 Grid或Twitter Bootstrap这样的网格系统。

于 2013-08-12T18:43:47.137 回答
0

设置喜欢clear: left;_#id3

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

当您使用浮动时，它会告诉后续元素尝试显示在它们旁边而不是下方。使用clear清除浮动并摆脱这种行为。

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

于 2013-08-12T18:36:50.087 回答