DIV 宽度（百分比）和填充答案

【问题标题】：DIV width in % and paddingDIV 宽度（百分比）和填充
【发布时间】：2013-09-15 10:05:45
【问题描述】：

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

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

【问题讨论】：

标签： html css

【解决方案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/

【讨论】：

【解决方案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;

它改变了填充和边框的渲染，使它们包含在宽度中而不是添加到宽度中。

【讨论】：

【解决方案3】：

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

例如

-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

【讨论】：

【解决方案4】：

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%;
}

【讨论】：

【解决方案5】：

对于宽度、边距和填充值，请使用 % 或 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

【讨论】：

【解决方案6】：

您可以将box-sizing:border-box 应用到带有填充的divs。

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

Live demo

来自MDN：

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

box-sizing 一直支持到 IE8。

【讨论】：

【解决方案7】：

你必须使用box-sizing:border-box;
因为使用border-box;会给你一个带边框的盒子外观并且它会自己管理边框的空间。

你可以给出宽度和颜色你自己的边界border:2px solid black;。因此，您的两个 div 的内容都可以区分。

【讨论】：