如何将2个div(每个都有自己的填充)彼此并排对齐? [英] How do I align 2 divs (each has its own padding) next to each other?

问题描述

如图所示，在填充被注释掉后，该网站的工作与我期望的一样(彼此相邻的2个div列.

With the padding commented out as shown, the website works like I'd expect (2 div columns next to each other.

但是，当我添加填充时，#right div 向下移动.我将如何使其与填充一起使用?

However, when I add padding, the #right div shifts downwards. How would I make it work as intended with padding?

HTML:正文中直接包含两个div

HTML: Two divs contained directly in 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;
}

推荐答案

添加

box-sizing:border-box;

box-sizing: border-box;

到您的divs.

如果不添加填充，则将其添加到div宽度(或高度)之外.与边框相同

If you don't the padding is added outside the div width (or height).. same as borders

已和

-webkit-box-sizing:边框框；-moz-box-sizing:边框框；

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

更多浏览器兼容性

这篇关于如何将2个div(每个都有自己的填充)彼此并排对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！