0

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

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

4

7 回答 7

2

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%;
}
于 2013-09-15T10:13:41.647 回答
2

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

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

于 2013-09-15T11:18:07.630 回答
2

您可以使用填充应用box-sizing:border-box到s。div

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

现场演示

来自MDN：

border-box:
width 和 height 属性包括内边距和边框，但不包括边距。

box-sizing一直支持到 IE8。

于 2013-09-15T10:10:09.110 回答
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;

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

于 2013-09-15T10:11:00.860 回答
2

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

例如

-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

于 2013-09-15T10:11:28.813 回答
2

是的，您可以使用该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/

于 2013-09-15T10:13:11.760 回答
2

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

于 2013-09-15T10:17:05.490 回答