如何在HTML中製作流體堆疊列布局？

我需要構建一個類似於www.PInterest.com上的佈局，其中 - 根據瀏覽器寬度（是響應式設計），列數會有所不同。問題不在於水平堆疊，而在於垂直。我如何讓這些盒子的高度不同以及堆疊在另一個盒子的頂部，它不會讓最高盒子決定整排的高度？如何在HTML中製作流體堆疊列布局？

使用ASP.NET MVC 3，HTML/HTML5，CSS/CSS3

來源

2012-02-17 Brian Hvarregaard

想到列而不是行。 http://stackoverflow.com/q/9205790/575527順便說一句，pinterest「列」不是實際的列。它們是動態放置的div，每個放置在整個頁面上。調試頁面，所有「部分」由**兄弟分區**分佈到列中。 – Joseph 2012-02-17 08:33:04

使三個元件（div，例如），即在其寬度流體。這些將作爲你的專欄。把你想要的元素放在每個列中，分別用<div>。

我剛纔提出這個作爲一個例子：http://jsfiddle.net/N4zkF/

我想觀看的例子比我用文字解釋會比較有幫助。三列以紅色，藍色和綠色接壤。每個的內容都有灰色/黑色背景和固定高度。

此答案已被編輯。上次我鏈接錯誤的jsfiddle（想知道爲什麼我得到了一個downvote）。希望這會幫助你，OP。

來源

2012-02-17 07:19:48

u需要設置一個百分比柱的側向承載力的寬度，並且對每一列的min-width ..

說妳想要3列的，對於響應式設計 - 將所有3列的寬度如width:33%在這種情況下，添加一個最小寬度爲您支持的分辨率至少，

說，1024x768 - 1000px is the total width that you might have at the minimum（忽略瀏覽器的額外24px的滾動每個邊條）..所以，讓min-width:333px ..所以，如果瀏覽器的寬度更多，它將佔據空間..否則，最小寬度將被設置，所以你不必擔心佈局ge擬合擰..

這裏有一個小提琴，讓你開始 - jsfiddle.net/mvivekc/XwYDr

這裏有一個很好的教程，我偶然

- http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

- http://css-tricks.com/the-perfect-fluid-width-layout/

來源

2012-02-17 07:38:24