使基础列跨越多个 "rows" 列

Question

这可能是一个非常愚蠢的问题，但我不知道如何使 3 组柱子与基础网格对齐。

HTML

<div class="row">
  <div class="medium-9 columns">
    <div class="medium-4 columns" style="height: 250px; background: green;"></div>
    <div class="medium-4 columns" style="height: 250px; background: blue;"></div>
    <div class="medium-4 columns" style="height: 250px; background: red;"></div>
  </div>
  <div class="medium-9 columns">
    <div class="medium-4 columns" style="height: 250px; background: yellow;"></div>
    <div class="medium-4 columns" style="height: 250px; background: orange;"></div>
    <div class="medium-4 columns" style="height: 250px; background: purple;"></div>
  </div>
  <div class="medium-3 columns" style="height: 500px; background: black;"></div>
</div>

我希望黑色列与第一个 "row" 列 对齐，而无需 使 .row 容器的位置相对并且 medium-3 columns div 绝对。

此外，为什么这不像我想象的那样有效？这种情况不就是网格系统的意义所在吗？

谢谢！

Answer 1

你很接近。正确的解应该是这样的(Fiddle):

<div class="row">
  <div class="medium-9 columns">
      <div class="row">
        <div class="medium-4 columns" style="height: 250px; background: green;"></div>
        <div class="medium-4 columns" style="height: 250px; background: blue;"></div>
        <div class="medium-4 columns" style="height: 250px; background: red;"></div>
      </div>
      <div class="row">  
        <div class="medium-4 columns" style="height: 250px; background: yellow;"></div>
        <div class="medium-4 columns" style="height: 250px; background: orange;"></div>
        <div class="medium-4 columns" style="height: 250px; background: purple;"></div>
      </div>
  </div>
  <div class="medium-3 columns" style="height: 500px; background: black;"></div>
</div>

Answer 2

您的 fiddle 关闭的原因是每行的长度需要为 12 列。如果一行包含 12 列或多于 12 列，则溢出的元素将换行到下一行，即使未声明一行。

<div class="row">
  <div class="medium-9 columns">
  ...
  </div>
  <div class="medium-9 columns">
  ...
  </div>
  <div class="medium-3 columns" style="height: 500px; background: black;"></div>
</div>

您在该行中的第二个 div 使这些列加起来为 18，因此将其推到下一个级别。这就是为什么 3 列的最后 div 附加到 9 列的第二个 div 的末尾。

要获得您想要的布局，您需要嵌套行并确保每行加起来最多 12 列。

<div class="row">
  <div class="medium-9 columns">
    <div class="row">
      <div class="medium-4 columns" style="height: 250px; background: green;"></div>
      <div class="medium-4 columns" style="height: 250px; background: blue;"></div>
      <div class="medium-4 columns" style="height: 250px; background: red;"></div>
    </div>
    <div class="row">  
      <div class="medium-4 columns" style="height: 250px; background: yellow;"></div>
      <div class="medium-4 columns" style="height: 250px; background: orange;"></div>
      <div class="medium-4 columns" style="height: 250px; background: purple;"></div>
    </div>
</div>
<div class="medium-3 columns" style="height: 500px; background: black;"></div>

使基础列跨越多个 "rows" 列

Make Foundation columns span multiple "rows" of columns

zurb-foundation