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

添加：＆＃34; box-sizing：border-box;＆＃34;

.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()函数指定加工宽度。请查看以下示例。

＆＃13;

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

＆＃13;

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

＆＃13;

更新了小提琴： 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属性与border-box值结合使用width属性作为实际渲染宽度。

示例：

.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>

添加填充或边距破坏浮动

6 个答案: