0

我的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

4

4 回答 4

3

写溢出：隐藏到它。

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

检查这个http://jsfiddle.net/A6qWE/1/

于 2012-09-10T08:57:06.317 回答
1

添加overflow:auto

http://jsfiddle.net/A6qWE/7/检查这个演示

于 2012-09-10T09:00:13.953 回答
1

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

于 2012-09-10T08:58:05.647 回答
0

向中间 div 添加边距margin: 0 100px

见代码示例@jsFiddle

于 2012-09-10T09:01:12.940 回答