html - 如何在 HTML/CSS 中制作 3 列完全响应式图像网格？

Question

在 HTML/CSS 中制作一个 3 列完全响应式图像网格的最佳方法是在中心图像的左侧/右侧留出 10 像素的边距（从 1280 像素一直响应到 320 像素），具有广泛的交叉浏览器支持？

我可以使用 CSS 属性，例如：column-count 吗？有没有更好的方法来实现这一目标？

Answer 1

你的格式本身很简单......

让我们假设这个基本格式在桌面大小......

|*****|*|*****|*|*****|
|     | |     | |     |
|     | |     | |     |
|*****|*|*****|*|*****|

所以，让我们使用 3.8% 的利润率。

我们需要根据这些边距计算列的宽度。我们有两个利润率为 3.8% = 7.6%。

100% - 7.6% = 92.4% / 3 列 = 30.8%

所以...

CSS：

.container { width: 100%; max-width: 1280px; min-width: 320px; margin: 0 auto; clear: both; }

.col-3 { float: left;  width: 30.8%; margin-right: 3.8%; }

.last { margin-right: 0; }

HTML：

<div class="container">
    <div class="col-3">
    </div>
    <div class="col-3">
    </div>
    <div class="col-3 last">
    </div>
</div>

您将需要使用媒体查询将其调整为移动设备的单列布局。