html - 制作按顺序流动的列布局

Question

我的网站上有三个专栏，我喜欢它的外观，尽管代码没有按顺序排列(它们就像博客帖子，所以我希望第一个是最新的，然后是最后一个帖子.

但由于结构原因，我必须将它们按顺序分别跨列放置，这有点繁琐，但我相信有更好的解决方案。我不是 Javascript 的忠实粉丝，如果可以单独使用 CSS，我将非常感激..

http://www.poipleshadow.com/Children-Charity-Pictures.htm

一切正常，虽然我更希望列中的元素按日期顺序排列，但目前它们按日期顺序排列，但按列排列。

所以总而言之，我希望它们在源代码中显示为

一个乙C丁乙FGH我

但显示

A  B  C
D  E  F
G  H  I

Answer 1

小提示，这只在 firefox 和 chrome 中才有可能。 CSS 中的纯砌体布局根本不可能。对于 Internet Explorer 回退查看 packery:http://packery.metafizzy.co/

编辑:如果您所有的盒子都具有相同的高度:然后将 float:left 添加到每个盒子

演示:http://jsfiddle.net/gabrieleromanato/tQANc/
演示 V2:http://jsfiddle.net/umbriel/TzkZ8/
DEMO V3 IE兼容:http://jsfiddle.net/umbriel/6e6Qy/HTML:

<div id="container" class="cols">
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box one"></div>
    <div class="box three"></div>
    <div class="box two"></div>
    <div class="box five"></div>
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box six"></div>
    <div class="box three"></div>
    <div class="box two"></div>
</div>

CSS:

#container {
    width: 100%;
    max-width: 700px;
    margin: 2em auto;
}
.cols {
    -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;
}
.box {
    margin-bottom: 20px;
}
.box.one {
    height: 200px;
    background-color: #d77575;
}
.box.two {
    height: 300px;
    background-color: #dcbc4c;
}
.box.three {
    background-color: #a3ca3b;
    height: 400px;
}
.box.four {
    background-color: #3daee3;
    height: 500px;
}
.box.five {
    background-color: #bb8ed8;
    height: 600px;
}
.box.six {
    background-color: #baafb1;
    height: 200px;
}