Question

这样做是不对的？

<div class="row">
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
</div>

而不是：

<div class="row">
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
</div>
<div class="row">
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
</div>
<div class="row">
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
</div>

从我所看到的结果是相同的，但div s更少。

Answer 1

两种方式都是正确的。添加.row非常有用，因为它可以保持均匀并清除以前的浮动内容。以小断点为例，它将div切换到50％（假设有12列网格）：

<div class="row">
  <div class="small-6 medium-4 columns">some content</div>
  <div class="small-6 medium-4 columns">some content</div>
  <div class="small-6 medium-4 columns">some content</div>
</div>
<div class="row">
  <div class="small-6 medium-4 columns">some content</div>
  <div class="small-6 medium-4 columns">some content</div>
  <div class="small-6 medium-4 columns">some content</div>
</div>

在上面的例子中，当它运行为小时，网格将是2,1,2和1.现在用一行做：

<div class="row">
  <div class="small-6 medium-4 columns">some content</div>
  <div class="small-6 medium-4 columns">some content</div>
  <div class="small-6 medium-4 columns">some content</div>
  <div class="small-6 medium-4 columns">some content</div>
  <div class="small-6 medium-4 columns">some content</div>
  <div class="small-6 medium-4 columns">some content</div>
</div>

此示例现在将细分为2,2和2.如果您在第二个示例中遇到浮动问题，则Foundation's Equalizer是解决这些问题的好方法。

Answer 2

<div class="row">
  <div class="small-12 medium-4 columns">some content</div>
  <div class="small-12 medium-4 columns">some content</div>
  <div class="small-12 medium-4 columns">some content</div>
</div>

这种结构的一些功能是：

舍入宽度 - 浏览器渲染宽度％不同..so 大多数框架都有float :opposite方向属性行中的column:last-child以便所有行中的最后一列排成一行。
行用于清除布局中的浮动.. 例如：Link

在上面的链接中由于列中的高度不相等，对齐方式混乱了。

<div class="row">
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
</div>

使用这种结构没有错。

在其他答案中，有些布局不能为每12列添加新行。

如果遇到上述问题中的对齐问题（这将是两个结构之间唯一的主要区别）。有自定义类来清除它们。

Zurb基础网格 - 重复列无行

2 个答案: