我需要构建一个类似于www.PInterest.com的布局，其中 - 根据浏览器宽度（是响应设计），列数会有所不同。问题不是水平堆叠而是垂直堆叠。我如何使盒子的高度不同并叠加在一起，以至于它不会让最高的盒子决定整行的高度？
使用ASP.NET MVC 3，HTML / HTML5，CSS / CSS3
答案 0 :(得分：2)
制作三个元素（例如div），它们的宽度是流动的。这些将作为您的列。将您想要的元素放在每列中，并使用相应的<div>。
我刚才以此为例：http://jsfiddle.net/N4zkF/
我认为查看这个例子比用文字解释它更有帮助。三列以红色，蓝色和绿色为边界。每个内容都有灰色/黑色背景和固定高度。
这个答案已被编辑。上次我联系了错误的jsfiddle（想知道为什么我有一个downvote）。希望这对你有帮助，OP。
答案 1 :(得分：1)
你需要用百分比设置列的宽度，并在每列上都有min-width ..
假设您想要3列，对于响应式设计 - 将所有3列的宽度设置为width:33%，并为您支持的最小分辨率添加最小宽度，
说，在这种情况下1024x768 - 1000px is the total width that you might have at the minimum（忽略每侧浏览器滚动条的额外24px）..所以，让min-width:333px ..所以，如果浏览器的宽度更多，它会占用空间..否则，最小宽度将被设置，所以你不必担心布局被搞砸..
这是一个让你入门的小提琴 - jsfiddle.net/mvivekc/XwYDr
这是一个很好的教程，我偶然发现
- http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts