添加填充或边距中断浮动

Question

我尝试创建像 bootstrap col 这样的 CSS 网格。 我想从左侧和右侧添加 15px 的填充。但是当我添加属性时，它会破坏浮动（使其不能并排）。

这是一个例子： https://jsfiddle.net/t29q1gcL/

为什么没用？

.grid-4{
  float: left;
  width: 40%;
  background: red;
  padding: 0 15px;
}

.grid-6{
  float: left;
  width: 60%;
  background: blue;
  padding: 0 15px;
}

Answer 1

将此添加到您的 css 中，参考链接 http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

* {
   box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -moz-box-sizing:border-box;
}

检查工作小提琴https://jsfiddle.net/d8mrdz7x/

Answer 2

添加：“box-sizing: border-box;”

.grid-4{
  float: left;
  width: 40%;
  background: red;
  padding: 0 15px;
  box-sizing:border-box;
}

.grid-6{
  float: left;
  width: 60%;
  background: blue;
  padding: 0 15px;
  box-sizing:border-box;
}

.clearfix{
  clear: both;
}

Answer 3

这是因为你为内容区域设置了宽度，而内容区域在内边距、边框和边距。因此，当您指定填充时，总宽度将为 60% + 15px。

您可以使用嵌套单元格绕过它：

/* remove padding from grid-X classes */

.cell {
  padding: 0 15px;
}

<div class="grid-6">
  <div class="cell">
  <p>content for grid6</p>  
  </div>
</div>

（我在这里分叉了你的 jsfiddle：https://jsfiddle.net/9ss09b15/）

您还可以将 box-sizing:border-box; 添加到您的 grid-X 类中，这将使其在宽度上包含填充和边框，但仍不包含边距。

Answer 4

如果padding 是一个常数，您可以使用calc() 函数来分配一个计算宽度。检查以下示例。

.grid-4 {
  float: left;
  width: calc(40% - 30px);
  /* 30px = 15px(padding-right) + 15px(padding-left) */
  background: red;
  padding: 0 15px;
}
.grid-6 {
  float: left;
  width: calc(60% - 30px);
  background: blue;
  padding: 0 15px;
}
.clearfix {
  clear: both;
}

<div class="grid-4">
  <p>content for grid4</p>
</div>
<div class="grid-6">
  <p>content for grid6</p>
</div>
<div class="clearfix"></div>

更新小提琴： https://jsfiddle.net/t29q1gcL/11/

Answer 5

使用box-sizing:border-box; 样式。因为 box-sizing 属性用来告诉浏览器尺寸属性（宽度和高度）应该包括什么。

宽度计算公式为width = margin-left -padding-left + width + margin-right -padding-right + border

在您的 css 样式中，总宽度超过了 100%，您使用了 60%、40% 和 padding 30px。所以，该休息了。

Answer 6

使用 CSS3 box-sizing 属性

box-sizing 属性用来告诉浏览器尺寸属性（宽度和高度）应该包括什么。

他们应该包括边界框吗？还是只是内容框（这是宽度和高度属性的默认值）？

box-sizing 属性结合border-box 值使用width 属性作为实际呈现的宽度，而不是通过包括padding 和border 来计算宽度。

示例：

.sidebar {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 1px solid #DDD;
}

应用的任何填充或边框都不会添加到渲染宽度。相反，它会自动从内容区域中的可用空间中减去。这导致代码更具可读性。这是一张有助于说明 box-sizing:border-box 如何计算宽度的图片。

参考

https://css-tricks.com/box-sizing/

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

http://blog.teamtreehouse.com/box-sizing-secret-simple-css-layouts

.grid-4{
  float: left;
  width: 40%;
  background: red;
  padding: 0 15px;
 box-sizing: border-box;
  
}

.grid-6{
  float: left;
  width: 60%;
  background: blue;
  padding: 0 15px;
  box-sizing: border-box;
}

.clearfix{
  clear: both;
}

<div class="grid-4">
  <p>content for grid4</p>
</div>
<div class="grid-6">
  <p>content for grid6</p>
</div>
<div class="clearfix"></div>