Question

我是Zurb Foundation的新手，但是喜欢学习这个新框架。它取代了我使用多年的旧式工作马力，似乎可以满足我的所有需求。

不幸的是，我正在尝试为网站执行一个响应头，并且我无法理解如何在新的XY-Grid中实现它。我有点接近，尽管在Small Breakpoint的Orange块完全失败了：（

我真的很感谢一些建议。

谢谢， mrEdge

由于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

Answer 1

据我了解，flexbox并非旨在执行您要尝试执行的操作。我相信这将是 flexbox 上 grid 的用例。

如果您真的想坚持使用默认类并使用Foundation，请根据您提供的图像使用this is the best I could get it (codepen)。您的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％的空间高度。

这是网格的来源，如果您将其与断点一起使用，则可以在具有空间的位置上移动元素。

Here's a great guide to using grid.

如何解决Foundation Sites v6.5.3中的XY网格响应行为挑战

1 个答案: