0

这样做有错吗？

<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>

据我所见，结果是相同的，但divs 更少。

4

2 回答 2

0 
<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>

这个结构做的一些事情是：

  1. 对宽度进行四舍五入 - 浏览器以不同的方式呈现宽度。所以大多数框架在行中都有一个float :opposite方向属性， column:last-child以便所有行中的最后一列对齐一行。
  2. 行用于清除布局中的浮动。例如：链接

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

<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 列使用新行。

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

于 2014-11-05T07:47:28.537 回答
0

两种方式都是正确的。添加 .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 的均衡器是解决这些问题的好方法。

于 2014-11-04T15:55:35.207 回答