如何在HTML/CSS中制作3列全响应式图像网格?

问题描述：

在HTML/CSS中，制作一个三列全响应图像网格并在中心图像的左侧/右侧具有10px的边距(从1280px一直下降到320px)的最佳方法是什么?广泛的跨浏览器支持?

What would be the best way to go about making a 3 column fully responsive image grid with a 10px margin on the left/right of the center image (responsive from 1280px all the way down to 320px) in HTML/CSS that has extensive cross-browser support?

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

Could I use a CSS propert such as: column-count? Is there a better way to achieve this?

答

您的格式本身非常简单...

Your format itself is quite simple...

让我们假设此基本格式为桌面尺寸...

Let's assume this basic format at desktop size...

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

因此，让我们使用3.8％的边距.

So, let's use 3.8% margins.

我们需要基于这些边距来计算列的宽度.我们有两个边距，分别为3.8％= 7.6％.

We need to calculate the width of our columns based on those margins. We have two margins at 3.8% = 7.6%.

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

100% - 7.6% = 92.4% / 3 columns = 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>

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

You will want to use media queries to adjust this to a single column layout for mobile.

如何在HTML/CSS中制作3列全响应式图像网格?

相关推荐