DIV布局问题

Question

我有以下页面上的DIV布局跨浏览器的麻烦：

www.richmindonline.com/index2.html

我已经创建了两个左右的div边框，使其易于识别。

看来，IE9嵌套正确的内部DIV内的外部DIV，而Firefox正在分开div的不同。我正在使用“作弊”标签来将div对齐到中心位置，但我没有使用这些标签进行测试，浏览器仍然以不同的方式呈现它们。

有问题的div的是在我的注释行位于：

我知道你们是聪明的，我期待您的帮助！谢谢，罗布

Answer 1

你需要通过添加类似于：<br clear="all"/>或<div style="clear:both; height:0;"></div>清除浮动div并向父div添加宽度，这应该修复它。

更多信息：基于浮动的布局的一个常见问题是浮动容器不希望拉伸以适应浮动。如果你想添加一个围绕所有漂浮物的边框（即容器周围的边框），你必须命令浏览器以某种方式将容器一直展开。

例如

<div class="parent"> 
    <div style="float:left"></div> 
    <div style="float:left"></div> 
    <div style="float:left"></div> 
    <br clear="all"/> 
</div> 

欲了解更多信息：http://quirksmode.org/css/clearing.html