html - 添加填充或边距中断 float

Question

我尝试创建类似 bootstrap col 的 CSS 网格。 我想从左侧和右侧添加 15px 的填充。但是，当我添加属性时，它会破坏 float (使其不能并排站立)。

例子如下: 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;
}

检查工作 fiddle https://jsfiddle.net/d8mrdz7x/