Question

大家好。我现在一直在努力解决这个问题。我想实现如下所述的大柱位置，但我还有其他的东西。

   medium               large                 What I get

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

正如您所看到的，在大屏幕中A和C之间存在很大差距。我希望C能够在不使用任何黑客的情况下占用空白区域。

以下是我尝试过的代码。

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

Answer 1

好的，你必须做的不同。将列嵌套在左侧和右侧的其他列中。

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

更新了fiddle

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

Answer 3

假设您要保留列顺序并且稍后会添加更多列，则您必须使用列式堆叠库，例如Masonry，Isotope或{{3实现你想要的。

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

如果侧柱高度很长，则在柱上建立大的空间

3 个答案: