如何在CSS中進行這種佈局？

This layout 如何在CSS中進行這種佈局？

我甚至不知道如何命名它。「流體」或「液體」柱似乎指簡單的動態高度。我做了這個，並得到了兩個問題：是否有可能用原始HTML5/CSS3做到這一點？是否有可能使它適用於3，4，...，n列？

來源

2013-06-20 Erik Escobedo

是的。可以用原始HTML5/CSS3來完成。 – Ani

您可能會發現這樣的幫助 - http://mcpants.github.io/jquery.shapeshift/ – CodeMoose

我明白，你想實現像this
可以使用Masonry - 這是純JavaScript &還支持jQuery的
或 Isotope這是一個jQuery插件。
這些插件的作者建議使用Isotope。

來源

2013-06-20 21:30:19 VenomVendor

非常感謝！這是我需要的。只是好奇心，是否有可能獲得相同的效果（當然沒有動畫）與裸CSS？ –

不，如果你看到[佈局模式：]（http://isotope.metafizzy.co/docs/introduction.html），那麼只用CSS是不可能的。試一下[demo]（http://isotope.metafizzy.co/），用選項調整瀏覽器的大小 - 「showall，original，mansory」，你會發現空隙，這些空隙實際上被使用jQuery的佈局模式所去除。 – VenomVendor

這一切都取決於你將如何設置每個閱讀框的高度。如果它與內容相關，那麼它只是一個具有流體寬度的2列布局。如果您要保持高寬比，則需要使用js進行數學運算並保持高度，或者使用img作爲背景width:100%; height:auto; display:block，並將內容position:absolute:置於頂部。

來源

2013-06-20 21:21:13

如何在CSS中進行這種佈局？

回答

相關問題