Question

我在另一个带有“span”类的div里面有一个div。子div的宽度设置为100％。由于某种原因，div正在父div之外流动。

将“overflow：hidden”添加到父级只会削减子div的内容。

有人知道解决方案吗？

以下代码

.span8 {
float: none;
display: block;
width: 100%;
margin-left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.child {
padding: 20px;
width: 100%;
}

<div class="span8 clearfix">
    <div class="child">
        My content    
    </div>
</div>

Answer 1

从您的子CSS类中删除width: 100%。

块元素自动渲染到其容器的整个宽度。此外，当您使用width: 100%手动设置padding时，它会像100% + 40px一样呈现。

.child {
    padding: 20px;
}

<div class="span8 clearfix">
    <div class="child">
        My content    
    </div>
</div>

Answer 2

除非你支持IE7，否则计算大小的边框（http://www.paulirish.com/2012/box-sizing-border-box-ftw/）方法似乎更容易一些（减少你进行数学计算的责任）。如果你放置：

* { margin:0; padding:0;    
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
}

位于样式表的顶部，您可以随意使用它。

Bootstrap问题div扩展到span之外

2 个答案: