我想将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>
有什么想法吗?
答案 0 :(得分:65)
使用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>
答案 1 :(得分:38)
我认为你想要的是一个额外的包装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>
答案 2 :(得分:8)
#similar {
float:left;
width:200px;
background:#000;
clear:both;
}
答案 3 :(得分:6)
将#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),尽管它与左右元素的宽度相同。
答案 4 :(得分:1)
你还可以做什么我在你的最后一个div之前放置一个额外的“虚拟”div。
使其高度为1 px,覆盖容器div / body所需的宽度
这将使最后一个div显示在它下面,从左边开始。
答案 5 :(得分:0)
#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;
}