如何使绝对元素响应流？

我将这些图像定位为绝对值，左/上为百分比。如何使绝对元素响应流？

但正如我缩小浏览器的宽度图像开始overlap.I没有设置第三和第四排的位置还没有，但你可以看到他们相互重叠。

我猜这是因为图像设置的距离？我如何定位图像，使它们与浏览器宽度减小时保持一致？

我的容器设置为相对块，图像为绝对值，具有％宽度和px高度。

我从这个设计中得到了想法http://builtbybuffalo.com/但我不知道他们是如何做到的。

2016-02-24 Calisto

我不知道你是否注意到，但在他们的页面上，六边形根本不会调整大小（以及..只在移动视图中变成矩形......） –

当然，它有几个断点。相关的是'最大宽度：1180px' –

@ m1。不，他们不调整大小。拿一把尺子把它放在屏幕上，看看自己。所有这些六边形都不过是所有内嵌块元素都会做的：如果没有可用空间，它们将浮动在下面。 –

他们这样做的方式是与media queries。基本上，他们设置了一个断点，当内容开始看起来不好时，并添加额外的CSS进行必要的调整。

你可以在他们的css here看到这个。在该文件中搜索此字符串：@media screen and (max-width: 1180px)并查看它下面的CSS（应该格式化CSS，因为它已缩小，您可以使用Chrome开发工具或类似this这样做）。

2016-02-24 02:09:37

我看到很多宽度变化。容器的宽度是多少？我没有看到上/右/下/左变化 - 这是否意味着图像不是绝对定位？我知道他们使用媒体查询，但我很好奇图像的位置。 – Calisto

我的意思是一旦缩小浏览器宽度，图像开始重叠。 – Calisto

回答