css 3 divs定位，两个左右浮动答案

【问题标题】：css 3 divs positioning, two with float right and leftcss 3 divs定位，两个左右浮动
【发布时间】：2012-09-03 02:50:21
【问题描述】：

我的html代码是

<div style="border:1px solid red; height:140px;">
    <div style="width:100px; float:left; border:1px solid blue;">
        left
    </div>
    <div style="width:100px;  float:right; border:1px solid blue; ">
        right
    </div>
    <div style="border:5px solid green;">
        middle
    </div>
</div>

为什么绿色边框会扩展到 100% 的宽度并覆盖左右 div？如何修复它以覆盖唯一以“middle”开头并在“right”之前结束的块？刚刚尝试position:relative;，但没有帮助。

代码示例在这里： jsFiddle

【问题讨论】：

标签： css html css-float alignment

【解决方案1】：

向其写入 overflow:hidden。

<div style="border:5px solid green;overflow: hidden;">
            middle
</div>

查看http://jsfiddle.net/A6qWE/1/

【讨论】：

【解决方案2】：

将overflow:hidden添加到包含单词middle的div的样式中

【讨论】：

【解决方案3】：

添加overflow:auto

http://jsfiddle.net/A6qWE/7/查看此演示

【讨论】：

【解决方案4】：

给中间的div添加一个边距margin: 0 100px

见代码示例@jsFiddle

【讨论】：