Question

我有一个看似非常基本的问题，但它已经困扰了我很长一段时间。

我的问题是宽度百分比。假设我有一个800px的容器div和2个div，它们都设置为float：left和width 50％。这将使它们并排并填满容器，但是如果我想为这些内部div添加边框，则会使它们太大而无法并排放置在容器内，并且会使一个下方低于另一个。

所以我的问题是：是否有一个自动填充容器的大小调整方法，无需手动指定像素宽度就考虑到边框（在800px容器的情况下，两个div内部的每一个都带有1px边框使每个div 398px宽......）？

感谢

Answer 1

是的，有一种名为box-sizing的方法写下这个：

    .parent{
    overflow:hidden;
    width:800px;
}
.child{
    width:50%;
    float:left;
    background:red;
    border:2px solid green;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box; 
}

选中此http://jsfiddle.net/QevgD/

阅读这篇文章http://www.quirksmode.org/css/box.html

但它直到IE8＆amp;上方。

调整带边框的html元素

1 个答案: