-1

我是 Zurb Foundation 的新手，但很喜欢学习这个新框架。它取代了我多年来一直使用的旧主力，似乎可以完成我需要的一切。

不幸的是，我正在尝试为网站执行一个响应式标题，但我无法理解如何在新的 XY-Grid 中实现它。我已经接近了，虽然在小断点处的橙色块完全失败了:(

我真的很感激一些建议。

谢谢，先生边缘

由于 xy 网格清除行且不支持浮动，我未能让红色元素以大尺寸隐藏在橙色和蓝色下方（但可以通过负边距破解它）。刚接触 Foundation 和 flex 并没有帮助 :(

<div class="grid-x align-right">
    <div class="cell small-5 medium-4 large-3" style="background-color:green;">
        GREEN
    </div>
    <div class="cell small-7 medium-8 large-9">
        <div class="grid-x">
            <div class="cell medium-12 large-7" style="background-color:orange;">
            <!-- Does not yet move above GREEN at small -->
                ORANGE
            </div>
            <div class="cell small-12 medium-12 large-5" style="background-color:blue;">
                BLUE
            </div>
        </div>
    </div>
    <div class="cell small-12 medium-12 large-9" style="background-color:red;">
        <!--Negative margin set at LARGE breakpoint (not a good solution)-->
        RED
    </div>
</div>

我已经制作了我想要实现的目标的图像，但由于我没有 10+ 的声誉，因此无法将其包括在内。也许这个链接会被允许：https ://i.imgur.com/TBSWGZr.png

4

1 回答 1

0

据我了解，flexbox 并不是为了做你想做的事情而设计的。我相信这将是grid over flexbox的一个用例。

如果您真的想坚持使用默认类并使用 Foundation，那么这是我能得到的最好的（codepen），基于您提供的图像。您的 HTML 位于顶部，而我的 HTML 位于底部，因此我们可以直接比较断点处的行为。

我敢肯定，比我有更好的排骨的人可能会看到不同的解决方案，在这种情况下，我真的很想看到它！

<div class="grid-x">
  <div class="orange cell small-12 medium-9 medium-order-2 large-4 large-order-2">
    ORANGE
  </div>
  <div class="green cell small-6 medium-3 medium-order-1 large-4 large-order-1">
    <p>GREEN</p>
    <p>content</p>
  </div>
  <div class="blue cell small-6 medium-9 medium-offset-3 medium-order-3 large-4 large-offset-0 large-order-3">
    BLUE
  </div>
  <div class="red cell small-12 medium-12 medium-order-4 large-8 large-order-4 large-offset-4">
    RED
  </div>
</div>

如您所见，当向每个 div 添加更多内容时，它会向下推整“行”内容，因此它们都占据了 100% 的空间高度。

这就是网格的用武之地，如果您将它与断点一起使用，那么您将能够在您拥有的空间周围移动元素。

这是使用网格的绝佳指南。

于 2019-04-01T14:21:03.847 回答