基础 6，空列

Question

我希望我的专栏看起来像这样：

| CONTENT | CONTENT | CONTENT | CONTENT | EMPTY | EMPTY |

所以我是这样创建的：

<div class="row">
  <div class="columns medium-4 large-2">CONTENT</div>
  <div class="columns medium-4 large-2">CONTENT</div>
  <div class="columns medium-4 large-2">CONTENT</div>
  <div class="columns medium-4 large-2">CONTENT</div>
</div>

但是最后一列被拉右了：

| CONTENT | CONTENT | CONTENT | EMPTY | EMPTY | CONTENT |

因此，为了避免这种情况，我是否应该将这两个额外的空列添加到 row div？它适用于那些额外的空 divs，但我不太喜欢添加空 divs 的想法。即使添加一个空 div 也会阻止向右浮动。

<div class="row">
  <div class="columns medium-4 large-2">CONTENT</div>
  <div class="columns medium-4 large-2">CONTENT</div>
  <div class="columns medium-4 large-2">CONTENT</div>
  <div class="columns medium-4 large-2">CONTENT</div>
  <div></div>
</div>

有更好的方法吗？

Answer 1

只需在最后一列添加class 'end'

<div class="row">
  <div class="columns medium-4 large-2">CONTENT</div>
  <div class="columns medium-4 large-2">CONTENT</div>
  <div class="columns medium-4 large-2">CONTENT</div>
  <div class="columns medium-4 large-2 end">CONTENT</div>
</div>

基础 6，空列

foundation 6, empty columns

css

zurb-foundation