靈活的div定位

我在頁面上有幾個div，它們都有相同的寬度但高度不同。他們都在一個div，#note1PreviewDiv。他們都共享類.note，它具有以下的CSS代碼（其他中）：靈活的div定位

.note{ 
    width: 160px; 
    padding: 10px; 
    margin: 10px; 
    background: #e3f0ff; 
    float: left; 
}

我想用float: left;他們都會自動對齊，使他們很好彼此之間對齊。

這裏是什麼樣子的預覽：

而這裏的定位應該是什麼樣子：

我覺得你的想法。不知何故，在我看來，最左邊的div的高度將第二排的其他div推向右邊 - 但這只是猜測。

感謝您的幫助！

Charles

不可能只用css – SVS 2012-07-28 10:36:40

這是用CSS3！看到我的答案。但瀏覽器支持並不理想。 – 2012-07-28 10:39:50

你不能用CSS只做這個。

CSS3有一個稱爲列布局的新功能，但瀏覽器支持並不好。 IE9及以下版本不支持它。

請參閱http://designshack.net/articles/css/masonry/和CSS3解決方案的最後一個示例。

看一看更容易實現和瀏覽器的支持，這些JS/jQuery的選擇：

2012-07-28 10:24:10

這是爲我做的！我選擇了砌體jQuery解決方案，它像一個魅力。但是，一個條件是元素要麼具有固定的高度，要麼從一開始就顯示。所以我分配了固定的高度。 – weltschmerz 2012-07-28 13:45:12

那種鋪陳你想真的很難（不可能？）沒有去了基於列的方法，並增加額外的塊級元素來代表每個列。如果你想要基於屏幕尺寸的動態佈局，這顯然不會適用於靈活的列數。

也就是說，您總是可以使用JavaScript將元素動態放置到列中，並使其與屏幕大小相匹配。

2012-07-28 10:28:53

父容器的高度是否爲固定值？如果是，請嘗試將父容器的高度設置爲auto，並將overlow propery設置爲隱藏。

2012-07-28 10:32:57 spaceman12

回答