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

在HTML/CSS中，在中心图像的左侧/右侧（从1280px一直下降到320px）制作一个3列完全响应的图像网格，最佳方式是什么？跨浏览器支持？如何在HTML/CSS中制作3列完全响应的图像网格？

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

来源

2013-03-21 Matt

您是动态生成图像还是手动输入？ – Michael 2013-03-21 14:58:37

要做到这一点，最好的方法是尝试这样做。然后，如果你无法按照你想要的方式工作，请回到这里并分享你的代码，SA社区会尽力帮助你。我不会推荐列计数，因为它并未在所有浏览器中得到完全支持。 – 2013-03-21 15:00:36

320px中的3列将成为有史以来最肮脏的事情。考虑在媒体查询开始变得糟糕时改变您的设计。 – 2013-03-21 15:00:38

你的格式本身是非常简单的...

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

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

所以，让我们用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>

您将要使用媒体q可以将此调整为适用于移动设备的单列布局。

来源

2013-03-21 15:09:37 Michael

您可以添加媒体查询的代码吗？平板电脑和手机将会非常棒。 – chaim 2013-11-18 17:03:11

很好，解决了我的问题，我没有使用媒体查询。我只是需要调整保证金的权利，我没有使用.last类 – Maximus 2014-02-08 17:42:58

我可以问你如何“调整[ed]保证金 - 权利”，以及在哪里？ – Paedow 2014-02-17 20:35:36

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

回答

相关问题