添加填充或边距浮动

Question

我试图像 bootstrap 一样创建 CSS 网格col。我想从左侧和右侧添加 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/