如果侧柱高度较长，则在柱上基础大空间答案

【问题标题】：Foundation big spaces on columns if the side column height is long如果侧柱高度较长，则在柱上基础大空间
【发布时间】：2016-02-05 13:32:44
【问题描述】：

大家好。关于这个问题，我已经尝试了几个小时。我想实现如下所述的大列位置，但我得到了其他东西。

   medium               large                 What I get

[    A    ]  |  [    A    ][         ]  |  [    A    ][         ]
 ---------   |   --------- [    B    ]  |             [    B    ]
[    B    ]  |  [         ][         ]  |             [         ]
 ---------   |  [    C    ] ---------   |   ---------  ---------
[    C    ]  |  [         ][    D    ]  |  [         ][    D    ]
 ---------   |  [         ]             |  [    C    ]
[    D    ]  |                          |  [         ]
             |                          |  [         ]

如您所见，大屏幕中的 A 和 C 之间有很大的差距。我希望 C 能够在不使用任何 hack 的情况下尽可能多地占用那些空白。

这是我尝试过的代码。

<div class="row profile align-top">
    <div id="A" class="column small-12 large-8">
        .....
    </div>

    <div id="B" class="column small-12 large-4">
        ....
    </div>

    <div id="C" class="column small-12 large-8">
        ....
    </div>

    <div id="D" class="column small-12 large-4">
        .....
    </div>
</div>

谢谢大家！

编辑：

添加 jfiddle 示例： https://jsfiddle.net/k18zw694/2/

【问题讨论】：

你能做一个jsfiddle吗？
@C.Schubert 这里是小提琴。 jsfiddle.net/k18zw694/2 .. 谢谢！

标签： css zurb-foundation zurb-foundation-6

【解决方案1】：

好的，你必须做不同的事情。将其他列中的列一左一右嵌套。

   <div class="left column small-12 large-6"><!-Content here--></div> 
   <div class="right column small-12 large-6"><!-Content here--></div>

更新fiddle

【讨论】：

在移动设备中，小提琴的顺序是 A、C、B、D。我希望它是 A、B、C、D。
我建议提出一个新问题。这样就可以回答这个问题，人们可以进行其他修复，因为这需要一些 javasascript

【解决方案2】：

您需要使用可见性类。我已经为您准备了解决方案，但我已将 large 替换为 medium 。这是必要的，因为在 JSfiddle 中我们无法将视口设置为大。

您必须在现有的row 旁边使用此 html：

<div class="row show-for-medium">
    <div class="medium-8 columns">
        <div class="row">
            <div id="A" class="column">
                <h1>
                  A
                </h1>
            </div>
        </div>
        <div id="C" class="column">
            <h1>
              C<br>C<br>C<br>C<br>
            </h1>
        </div>
    </div>
    <div class="medium-4 columns">
        <div id="B" class="column">
            <h1>
              B<br>B<br>B
            </h1>
        </div>
        <div id="D" class="column">
            <h1>
              D
            </h1>
        </div>
    </div>
</div>

为了清楚起见，请查看此示例和 JSfiddle 上的解决方案： https://jsfiddle.net/linkers/fea3evce/2/

【讨论】：

【解决方案3】：

假设您想要保留列顺序并且稍后会添加更多列，您将不得不使用像 Masonry、Isotope 或 Packery 这样的列堆叠库来实现您想要的。

这些库将自动定位列以填充由较高的前一列推动下一行所产生的空白。否则，使用 css 无法直接实现（除了绝对定位它们，或者可能是 flexbox），并且对于 Zurb Foundation 来说不是问题。

【讨论】：