Question

我的响应式布局出现问题。我的十二个列块不在一行上，最后两个块在它下面浮动但是应该全部在一行中。

每一行都有自己的列块。

您可以在我的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; 
}

Answer 1

删除列上的边距：

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

由于100% x 12而不是达到20px宽度，因此余量导致它们的宽度减少。因此，您获得100% + 240px，这导致最后2位移到下方

DEMO HERE

Answer 2

Ruddy是对的，你没有考虑列之间的阴沟。按照他的方式或 ......

简单解决方案：

尝试从每个块类中减去2％，在这里工作。

FANCY SOLUTION：

如果你使用LESS，你可以使用变量，所以你可以这样做：

/*LESS FILE*/

@gutter: "20px";

.block1 {
   width: (8.333% - @gutter);
}

希望它有所帮助。

响应列不工作？

2 个答案: