Html 如何强制 div 出现在下面而不是另一个旁边？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2492873/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to force div to appear below not next to another?
提问by Vonder
I would like to place my div below the list, but actually it is placed next to the list.The list is generated dynamically, so it doesn't have a fixed hight. I would like to have the map div on the right, and on the left (next to the map) the list placed on top and the second div below the list(but still on the right to the map)
我想把我的 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>Any ideas?
有任何想法吗？
采纳答案by Todd
I think what you want requires an extra wrapper div.
我认为你想要的需要一个额外的包装 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>回答by Matthew Vines
use clear:left; or clear:both in your css.
使用清除：左；或清除：两者都在您的 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>
回答by Kyle
#similar {
float:left;
width:200px;
background:#000;
clear:both;
}
回答by Jonny Haynes
Float the #listand #similarthe right and add clear: right;to #similar
浮动#list和#similar右边并添加clear: right;到#similar
Like so:
像这样：
#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>
You might need a wrapper(div) around all of them though that's the same width of the left and right element.
尽管左右元素的宽度相同，但您可能需要在它们周围都有一个包装器（div）。
回答by Terry
what u can also do i place an extra "dummy" div before your last div.
你还可以做什么我在你的最后一个 div 之前放置一个额外的“虚拟”div。
Make it 1 px heigh and the width as much needed to cover the container div/body
使其高度为 1 px，宽度为覆盖容器 div/body 所需的宽度
This will make the last div appear under it, starting from the left.
这将使最后一个 div 出现在其下方，从左侧开始。
回答by simhumileco
#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;
}
