css - 引导问题 div 扩展到跨度之外

Question

我在另一个具有“跨度”类的 div 中有一个 div。子 div 的宽度设置为 100%。由于某种原因，div 在父 div 之外流动。

向父级添加“溢出：隐藏”只会切断子 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

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

块元素会自动呈现到其容器的全宽。此外，当您像以前一样手动设置时，它会呈现width: 100%为.padding100% + 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; 
}

在样式表的顶部，您可以在任何地方自由使用它。