如何强制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>

有任何想法吗？

Answer 1

使用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>

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>

Answer 3

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

Answer 4

浮动#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),尽管它与左右元素的宽度相同.