1

我有这个 HTML

.container_1
{
    width: 80%;
    border: 5px solid black;
    overflow: hidden;
}

.container_2
{
    float: left;
    border: 5px solid red;
    width: 100%;                    
}

.container_1
{
    width: 80%;
    border: 5px solid black;
    overflow: hidden;
}

.container_2
{
    float: left;
    border: 5px solid red;
    width: 100%;                    
}

<div class="container_1">
    <div class="container_2">
    Content 1
    </div>
    <div class="container_2">
    Content 2
    </div>    
</div>​

小提琴http://jsfiddle.net/uZVnB/3/

问题是，正如您在小提琴中看到的那样， .container_1 的边界与 .container_2 的边界重叠，任何显示两个容器边界的完整形式也是如此

4

5 回答 5

4

从 中删除float& 。像这样写：width.container_2

.container_2
{
    border: 5px solid red;   
}

检查这个http://jsfiddle.net/uZVnB/4/

于 2012-07-25T07:11:31.673 回答
0

您可以通过使用 CSS 属性来实现它box-sizing:border-box;

看演示

CSS：

.container_1 {
    width:80%;
    border:1em solid;
    overflow: hidden;
}

.container_2 {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    width:100%;
    border:1em solid red;
}
于 2012-07-25T07:16:33.520 回答
0

考虑到 IE，这是我的解决方案。
边框将始终超过 100% 宽度。

这是解决方案http://jsfiddle.net/uZVnB/41/
希望这会有所帮助

于 2012-07-25T10:28:33.893 回答
0

将宽度.container_2从 100% 更改为 98%，一切都会好起来的。当你将它的宽度设置为 100% 时，它自然会扩大到最大，并且边框会重叠。

于 2012-07-25T07:14:04.017 回答
0
  1. 移除float: leftand width: 100%，因为块元素填充了其容器的整个宽度，所以它工作正常。
  2. 如果你必须使用float: leftstyle （虽然我不认为它是必需的，因为你有一个width: 100%使 float 不按照定义的行为），你可以使用box-sizing: border-box，但它只适用于现代浏览器，低版本的 IE 不支持这个性质。
  3. 也可以用position: absolute; left: 0; right: 0;to绝对定位，但是也和float: leftstyle冲突，IE6不支持。
于 2012-07-25T07:14:15.610 回答