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

Question

如图所示，将填充注释掉后，网站的工作方式与我预期的一样（2 div 列彼此相邻。

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

HTML: 两个 div 直接包含在 body

中

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;

给你的 divs.

如果不这样做，填充将添加到 div 宽度（或高度）之外。与边框相同

编辑：和

-webkit-box-sizing: border-box; -moz-box-sizing: border-box;

更多浏览器兼容性

Answer 2

如果您正在使用 css3 ，您可以使用 box-sizing: border-box;

否则，您可以有另一个 child div 并将 padding 应用于 child div 而不是 parent 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（每个都有自己的填充）彼此相邻对齐？

How do I align 2 divs (each has its own padding) next to each other?

html

css

alignment

css-float