如何强制div出现在下面而不是旁边？
我想把我的div放在列表下面，但实际上它放在列表旁边。列表是dynamic生成的，所以它没有固定的高度。 我想在右边的地图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"></div> <ul id="list"></ul> <div id ="similar"> this text should be below, not next to ul. </div> 有任何想法吗？
我想你想要什么需要一个额外的包装div。
<style> #map { float: left; width: 700px; height: 500px; } #wrapper { float: left; width: 200px; } #list { background: #eee; list-style: none; padding: 0; } #similar { background: #000; } </style> <div id="map"></div> <div id="wrapper"> <ul id="list"></ul> <div id ="similar"> this text should be below, not next to ul. </div> </div>
使用clear：left; 或清除：在你的CSS。
#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; }
浮动#list和#similar右边的#list ，并添加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），尽pipe左右元素的宽度相同。
你还可以做什么我放置一个额外的“虚拟”div在你的最后一个div之前。
使1 px高度和宽度尽可能多的覆盖容器格/身体
这将使最后的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; }
这是一个小提琴 。
