如何使絕對元素響應流？

我將這些圖像定位爲絕對值，左/上爲百分比。如何使絕對元素響應流？

但正如我縮小瀏覽器的寬度圖像開始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

回答