Question

我在一个980像素宽的容器中彼此相邻（左边是A，右边是B）有2个DIV。我为A和B设置了50％的宽度，效果很好。

问题：我想为DIV A添加一些填充权限，以便其中的文本不会触及div B的文本。如果我这样做，我需要调整DIV的％（即48％）。有没有办法避免这种情况？（即根据填充量自动调整％）

Answer 1

您可以使用填充将box-sizing:border-box应用于div。

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

Live demo

来自MDN：

border-box：
宽度和高度属性包括填充和边框，但不包括边距。

box-sizing一直支持IE8。

Answer 2

您可以再使用一次div包裹：

<div class="wrapper">
    <div class="inner">
         <div class="left"></div>
         <div class="right"></div>
    </div>
</div>

.wrapper { width: 960px; }
.inner { padding: 1em; }
.left, .right { width: 50%; float: left; }

或者使用box-sizing使得计算变得非常容易。

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

它会更改填充和边框的渲染，以便它们包含在宽度中而不是添加到其中。

Answer 3

如果您想在不减小div宽度的情况下添加填充，可以使用：box-sizing: border-box; More info

e.g。

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

这将使div成为所需的宽度（50％），并且将减去填充而不是添加到div。请注意这是一个CSS3属性，并不适用于所有版本的IE： http://caniuse.com/css3-boxsizing

Answer 4

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

box-sizing: border-box;

width属性将设置总宽度（包括边框和填充），例如div为：

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

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

供参考：http://css-tricks.com/box-sizing/

Answer 5

HTML

<div class="tbl">
  <div class="row">
    <div class="cell">A</div>
    <div class="cell">B</div>
  </div>
</div>

CSS：

.tbl{

  display:table;
  border-spacing:5px;
}
.row{
  display:table-row;

}
.cell{
  display:table-cell;
  width:50%;
}

Answer 6

宽度，边距和宽度填充值使用％或em值

看一下这段代码

 .container { 
     max-width: 980px;
 }
 section {
     float: left;
     margin: 0.0122448;   /*  10px ÷ 980px */
     width: 0.479591;   /* 470px ÷ 660px  */   
 }
 aside {
     float: right;
     margin: 0.0122448;   /*  10px ÷ 980px */
     width: 0.479591;   /* 470px ÷ 980px */
}

有关响应式设计的完整教程 -

http://learn.shayhowe.com/advanced-html-css/responsive-web-design

Answer 7

您必须使用box-sizing:border-box;因为使用border-box;会让您看到带有边框和＆amp;的框。它将自行管理边框的空间。

你可以自己给出边框的宽度和颜色border:2px solid black;。因此，你们两个div的内容可能会有所不同。

DIV宽度（％）和填充

7 个答案: