0

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

   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/

4

3 回答 3

0

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

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

更新的小提琴

于 2016-02-05T14:13:15.490 回答
0

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

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

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

于 2016-02-15T10:56:52.657 回答
0

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

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

于 2016-02-15T11:17:55.267 回答