Question

如何在响应场景（即25％宽度）中实现此布局，但每个块具有相同的高度：

 _ _ _ _
|_|_|_|_|
|_|___|_|
|_|_|_|_|

注意中间块占据（宽度的50％），中间块包含文本，但方形图像是图像（方形，给出其大小）。

我应该使用与display: table和display: table-cell混合的display: table-row吗？或者有漂亮的CSS技巧。

Answer 1

Flexbox非常酷，但我们尚未获得100％的支持，所以我还没有使用它。我可能会查看像www.shelvesgrid.org这样的内容。然后在框内的图像上有一个宽度：100％，如果它们都是完全正方形的，它应该可以工作。

您的结构将如下所示：

<div class="row">
    <div class="column-3"></div>
    <div class="column-3"></div>
    <div class="column-3"></div>
    <div class="column-3"></div>
</div>

<div class="row">
    <div class="column-3"></div>
    <div class="column-6"></div>
    <div class="column-3"></div>
</div>
<div class="row">
    <div class="column-3"></div>
    <div class="column-3"></div>
    <div class="column-3"></div>
    <div class="column-3"></div>
</div>

你的CSS只是img {width：100％}

响应式网格，高度相等

1 个答案: