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

Question

什么是最好的方法来制作一个3列完全响应的图像网格,在中心图像的左/右边缘具有10px边距(从1280px一直到320px响应)在HTML/CSS中具有广泛的交叉浏览器支持？

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

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