Question

如图所示填充填充，网站就像我期待的那样（彼此相邻的2个div列。

但是，当我添加填充时，＃right div 向下移动。如何使用填充使其按预期工作？

HTML：两个div直接包含在正文

中

CSS：

#left {
    background-color: green;
    float: left;
    margin-top: 0px;
    width: 70%;
}

#right {
    background-color: blue;
    float: right;
    margin-top: 0px;
    width: 30%;
}

#left, #right {
    //padding: 10px;
    display: inline-block;
    height: 800px;
}

Answer 1

添加

box-sizing：border-box;

到您的div。

如果你没有在div宽度（或高度）之外添加填充..与边框相同

编辑：和

-webkit-box-sizing：border-box; -moz-box-sizing：border-box;

获得更多浏览器兼容性

Answer 2

如果您使用的是css3，则可以使用box-sizing: border-box;

否则，您可以让另一个孩子div并将padding应用于孩子div，而不是父div

Answer 3

#left {
	background-color: green;
	float: left;
	margin-top: 0px;
	width: 70%;
}
#right {
	background-color: blue;
	float: right;
	margin-top: 0px;
	width: 30%;
}
#left, #right {
	padding: 10px;
	display: inline-block;
	height: 800px;
	color:#fff;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

<div id="left"> left </div>
<div id="right"> right </div>

如何将2个div（每个都有自己的填充）对齐？

3 个答案: