使基础列跨越多个“行”列答案

【问题标题】：Make Foundation columns span multiple "rows" of columns使基础列跨越多个“行”列
【发布时间】：2019-08-29 22:12:34
【问题描述】：

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

这是js fiddle

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 容器的位置相对而medium-3 columns div 的位置是绝对的。

此外，为什么这不像我想象的那样工作？这样的情况难道不是网格系统的重点吗？

谢谢！

【问题讨论】：

标签： zurb-foundation

【解决方案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>

【讨论】：

太棒了，谢谢！您是否碰巧知道将列放入行中的具体操作是什么，以使黑色列很好地适合它们？检查元素似乎没有表明任何不同/会首先干扰列的存在？
这是关于基金会网格的构建方式（doc - 查看高级段落）。

【解决方案2】：

您的小提琴关闭的原因是因为每行的长度必须为 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>

【讨论】：