html - 响应列不起作用？

我的响应式布局遇到问题。我的十二列方块不在一行中，最后两列不在其下，但应全部排成一行。

每行将具有其自己的列块。

您可以在我的Codepen代码段中获得有关我的意思的完整代码视图。
http://codepen.io/riwakawebsitedesigns/pen/zbmLE

.container {
  display: block;
  width: 94%;
  max-width: 1280px;
  margin: 2% auto 0 auto;
}

.row {
  display: block;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  background: #e5e5e5;
  min-height: 40px;
  text-align: center;
  float: left;
  margin-right: 20px;
}

.block-1 {
  width: 8.33333333%;
}

.block-2 {
  width: 16.66666667%;
}

.block-3 {
  width: 25%;
}

.block-4 {
  width: 33.33333333%;
}

.block-5 {
  width: 41.66666667%;
}

.block-6 {
  width: 50%;
}

.block-7 {
  width: 58.33333333%;
}

.block-8 {
  width: 66.66666667%;
}

.block-9 {
  width: 75%;
}

.block-10 {
  width: 83.33333333%;
}

.block-11 {
  width: 91.66666667%;
}

.block-12 {
  width: 100%;
}

.last, .omega, .end{
  margin: 0;
}

最佳答案

删除列上的边距：

.column {
  background: #e5e5e5;
  min-height: 40px;
  text-align: center;
  float: left;
  margin-right: 20px; <!-- remove -->
}

由于100% x 12，余量没有达到20px宽度，而是使它们的宽度减小。因此，得到100% + 240px时，这将导致最后2个移到下面。

DEMO HERE

关于html - 响应列不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22302331/