0

下面，我希望 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>
4

4 回答 4

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>
于 2012-06-13T07:33:22.890 回答
1

您希望<div id="A">包含其后代元素，即使它们是浮动的。

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

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

于 2012-06-13T07:37:45.157 回答
0

这将做到：

#a2 { clear: right; }
于 2012-06-13T07:38:06.993 回答
0

演示：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对任何包含浮动元素的容器使用类。

于 2012-06-13T07:39:07.710 回答