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>

我希望黑色列与第一个＆＃34;行＆＃34;排成一行。列没有使.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

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

使基础列跨越多个＆＃34;行＆＃34;列

2 个答案: