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

Question

我想把我的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>

有什么想法吗？

- Vonder

Answer 1

在你的 CSS 中使用 clear:left; 或 clear:both;。

#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>

- Matthew Vines

---

我的意思是它应该在列表下面，而不是地图下面。我希望它在地图右侧，但在列表下面。 - Vonder

Answer 2

我认为你想要的需要一个额外的包装 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>

- Todd

Answer 3

#similar { 
float:left; 
width:200px; 
background:#000; 
clear:both;
}

- Kyle

Answer 4

将#list浮动并将#similar向右对齐，然后在#similar中添加clear: right;。

如下所示：

#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)，以使其宽度与左侧和右侧元素相同。

- Jonny Haynes

Answer 5

你还可以在最后一个 div 前面添加一个额外的“虚拟”div。

将其高度设置为 1 像素，宽度尽可能覆盖容器 div/body。

这将使最后一个 div 出现在其下方，从左侧开始。

- Terry

Answer 6

#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;
}

- simhumileco