html - 填充被添加到 div 的宽度

Question

我用这个代码

<div class="main">
<div class="babyOne">
</div>
<div class="babyTwo">
</div>
</div>

.main{
width:100%;
position:relative;
}
.babyOne,.badyTwo{
width:50%;
float:left;
}

上面的这个 CSS 一切正常。

但是一旦我给内部 div 填充所有 ui 中断，

.babyOne,.badyTwo{
width:50%;
float:left;
padding:5px;
}

并且 fire bug 显示 div 的宽度增加等于填充。根据填充属性，这不应该发生。知道如何防止这种情况吗？

Answer 1

首先你需要学习CSSbox-model

这表明无论padding, border, margin您添加到元素中的任何内容都会在它之外计算，因此例如元素是200px widthand 100px height，如果您添加paddingsay5px而不是widthandheight将分别是205pxand 105px，因此为了解决此问题，您需要使用 CSS3box-sizing属性，但是作为仍然是CSS3属性，如果 IE 是您想要支持的主要内容，我建议您根据需要调整元素的大小

因此，例如具有这些样式的 div

div {
   height: 100px;
   width: 200px;
   padding: 5px;
}

您可以将上面的大小重新调整为

div {
   height: 95px;
   width: 195px;
   padding: 5px;
}

CSS3box-sizing 参考

Answer 2

WRAPPER 必须具有固定大小：http: //jsfiddle.net/esVgH/1示例：

.main{
   width:200px;
   position:relative;
}

Answer 3

您的问题是预期的行为。
你设置一个宽度，然后你说给它一些填充。
所以宽度加上填充将大于原始宽度。

你可以试试 CSS3sbox-sizing属性：http ://www.quirksmode.org/css/box.html

我不确定它的支持范围有多广。

这里还有很多 SO 答案：如何在不增加 div 大小的情况下在 HTML 中应用填充？

Answer 4

另一种解决方案是将 .baby 显示为表格单元格：

.babyOne, .badyTwo {
   display: table-cell;
}

Answer 5

.babyOne,.badyTwo{

宽度：45%；/* 正如你所喜欢的基于填充 */

向左飘浮;

填充：5px；

}