1

我正在使用 Unsemantic CSS Grid 框架来创建一个看起来像这样的布局（简化以使问题清晰）：

在此处输入图像描述

您在这里看到的是 3 行，每行有 2 列。代码大致如下：

<!-- First row -->
<div class="grid-50">
    Title 1
</div>
<div class="grid-50">
    Title 2
</div>
<div class='clear'></div>


<!-- Second row -->
<div class="grid-50">
    <img src='image1.png' />
</div>
<div class="grid-50">
    <img src='image2.png' />
</div>
<div class='clear'></div>


<!-- Third row -->
<div class="grid-50">
    Text paragraph here
</div>
<div class="grid-50">
    Another paragraph of text
</div>
<div class='clear'></div>

使用 3 行的好处是，即使图像 1 和图像 2 的高度不同，它们下面的文本段落也会在两列中排列（意味着它在两列中从相同的垂直位置开始），因为我使用图像后的“清晰”。如果我改为使用 1 行和 2 列，其中每一列是一个 div，其中一个标题、图像和段落文本一个在另一个之上，那么如果图像具有不同的高度，则段落文本将不会对齐。所以使用 3 行给了我我正在寻找的东西。

不幸的是，在移动设备上查看时会发生这种情况：

在此处输入图像描述

这是因为每行的两列最终彼此重叠。

我想得到的是：

在此处输入图像描述

换句话说，我希望 row1col1、row2col1 和 row3col1 粘在一起，然后 row1col2、row2col2 和 row2col2 出现在下面。

我该怎么做呢？Unsemantic 中是否有任何东西可以让我将一列“捆绑”在一起。

如果我改为创建 2 个带有标题、图像和文本段落的 div，并将它们放在 1 行中，这将解决这个问题，但是如果图像的高度不同，文本段落将不会对齐。我无法对高度进行硬编码，因为这是一种流体布局，当页面宽度发生变化时，列的宽度会发生变化，这反过来又会改变图像的宽度（因为它们的宽度设置为容器的 100% )，因此它们的高度会发生变化。使这种方法发挥作用的任何技巧、变通方法或建议都将是最有帮助的。

作为最后的手段，我正在考虑使用 jQuery 在页面调整大小时定位段落文本；如果您认为这是一个很好的解决方案（或唯一的解决方案），请随时分享在此方法中需要注意的任何建议或陷阱。

4

0 回答 0