html - 如何将 2 个 div(每个都有自己的填充)彼此相邻对齐？

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;

为了更多的浏览器兼容性