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

Question

在 HTML/CSS 中制作一个 3 列完全响应式图像网格的最佳方法是在中心图像的左侧/右侧有 10px 的边距(从 1280px 一直响应到 320px)广泛的跨浏览器支持？

我可以使用 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>

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