Question

下面，我希望div A作为内部div的两列布局，其下方有其他div。但是因为图像很高，所以下面的div最终会在它旁边。如何在图像下方显示div B和C？

<div id='A' style='position:relative'>
    <div id='A1' style='width:50%;float:left;'><img src="http://maps.googleapis.com/maps/api/staticmap?maptype=roadmap&sensor=false&size=100x100&markers=color:blue|label:A|51.535908,-0.066271&" /></div>
    <div id='A2' style='width:50%;float:left;'>Chelsea Branch<br/>Branch</div> 
</div>
<div id='B'>
    <b>Description:</b> <br />
    This is a location.
</div><br/>
<div id='C'>
    <b>Address:</b><br />
    123 Fake Stree<br />Chelsea<br />London<br />XH28 5JH<br />United Kingdom<br />
</div>

Answer 1

在A1和A2之后添加“清除”。

<div id='A' style='position:relative'>
    <div id='A1' style='width:50%;float:left;'><img src="http://maps.googleapis.com/maps/api/staticmap?maptype=roadmap&sensor=false&size=100x100&markers=color:blue|label:A|51.535908,-0.066271&" /></div>
    <div id='A2' style='width:50%;float:left;'>Chelsea Branch<br/>Branch</div> 
    <div style="clear:both"></div>
</div>
<div id='B'>
    <b>Description:</b> <br />
    This is a location.
</div><br/>
<div id='C'>
    <b>Address:</b><br />
    123 Fake Stree<br />Chelsea<br />London<br />XH28 5JH<br />United Kingdom<br />
</div>

Answer 2

你想让<div id="A">包含它的后代元素，即使它们是浮动的。

由于某种原因，这被称为“clearfix”，有几种不同的方法可以做到：

关于这个主题还有一些其他Stack Overflow问题，例如

What methods of ‘clearfix’ can I use?

Answer 3

这样做：

#a2 { clear: right; }

Answer 4

演示：http://jsfiddle.net/MXLSn/

将clearfix课程添加到<div id='A' style='position:relative' class="clearfix">

在CSS文件中复制这些类

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

您可以将clearfix类用于任何已浮动元素的容器。

如何使下面的div显示在2列div布局下

4 个答案: