如何强制 div 出现在下面而不是另一个旁边？

我想把我的 div 放在列表的下面，但实际上它是放在列表的旁边。列表是动态生成的，所以它没有固定的高度。我希望地图 div 在右边，在左边(地图旁边) ，列表放在上面，第二个 div 在列表下面(但仍然在地图的右边)

#map { float:left; width:700px; height:500px; }
#list { float:left; width:200px; background:#eee; list-style:none; padding:0; }
#similar { float:left; width:200px; background:#000; } 
<div id="map">Lorem Ipsum</div>
<ul id="list"><li>Dolor</li></li>Sit</li><li>Amet</li></ul>
<div id ="similar">
this text should be below, not next to ul.
</div>

有什么想法吗？

259466 次浏览
小开

在 css 中使用 clear: left; 或 clear: 都使用。

#map { float:left; width:700px; height:500px; }
#list { float:left; width:200px; background:#eee; list-style:none; padding:0; }
#similar { float:left; width:200px; background:#000; clear:both; }




<div id="map"></div>
<ul id="list"></ul>
<div id ="similar">
this text should be below, not next to ul.
</div>
小开 
#similar {
float:left;
width:200px;
background:#000;
clear:both;
}
小开

你还可以做的是，在你的最后一个 div 之前放一个额外的“哑”div。

使其高度为1像素，宽度为覆盖容器 div/body 所需的最大值

这将使最后一个 div 从左边开始显示在它下面。

小开
最佳答案

我想你需要额外的包装纸。

#map {
float: left;
width: 700px;
height: 500px;
}
#wrapper {
float: left;
width: 200px;
}
#list {
background: #eee;
list-style: none;
padding: 0;
}
#similar {
background: #000;
}
<div id="map">Lorem Ipsum</div>
<div id="wrapper">
<ul id="list"><li>Dolor</li><li>Sit</li><li>Amet</li></ul>
<div id ="similar">
this text should be below, not next to ul.
</div>
</div>

小开

浮动 #list和 #similar的权利，并添加 clear: right;到 #similar

像这样:

#map { float:left; width:700px; height:500px; }
#list { float:right; width:200px; background:#eee; list-style:none; padding:0; }
#similar { float:right; width:200px; background:#000; clear:right; }




<div id="map"></div>
<ul id="list"></ul>
<div id="similar">this text should be below, not next to ul.</div>

您可能需要一个包装器(div)来包装所有这些元素，尽管它们的宽度相同。

小开 
#map {
float: right;
width: 700px;
height: 500px;
}
#list {
float:left;
width:200px;
background: #eee;
list-style: none;
padding: 0;
}
#similar {
float: left;
clear: left;
width: 200px;
background: #000;
}

提交答案