html - 以 % 和填充为单位的 DIV 宽度

Question

我在一个 980 像素宽的容器内有 2 个相邻的 DIV(A 在左边，B 在右边)。我为 A 和 B 设置了 50% 的宽度，效果很好。

问题:我想向 DIV A 添加一些 padding-right，以便其中的文本不会触及 div B 的文本。如果我这样做，我需要调整 DIV 的百分比(即48%)。有没有办法避免这种情况？ (即根据填充自动调整百分比)

Answer 1

是的，您可以使用 box-sizing 属性。通过设置:

box-sizing: border-box;

width 属性将设置总宽度(包括边框和填充)，例如一个 div 具有:

div {
    width:500px;
    padding: 20px;
    border: 10px solid blue;
    box-sizing: border-box;
}

视觉总宽度为 500 像素，而不是默认宽度 500 + 40 + 20 = 560 像素。

供引用:http://css-tricks.com/box-sizing/