Question

我的网站上有三列，我喜欢它看起来的样子，虽然代码不合适（它们就像博客文章所以我希望第一个是最新的，然后才能发布最后一篇文章

但是由于结构的原因，我必须将它们按顺序排列在一起，这有点繁琐，我相信这是一个更好的解决方案。我不是Javascript的忠实粉丝，如果可以自己使用CSS，我会非常感激..

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

一切都还好，虽然我希望如果列中的项目按日期顺序排列，那么它们是按日期顺序但是每列。

总而言之，我希望它们像

一样在源中显示

一个乙 C d Ë F G H 我

但显示

A  B  C
D  E  F
G  H  I

Answer 1

小注意，这只适用于firefox和chrome。 CSS中的纯砌体布局根本不可能。对于互联网资源管理器，请回顾一下：http://packery.metafizzy.co/

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

DEMO：http://jsfiddle.net/gabrieleromanato/tQANc/
DEMO 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;
}

Answer 2

您只需将所有div class="blog-item vevent">一个接一个地放在一个<div class="col span_1_of_3">中（并从width中移除css）给他们Width，margin和float:left;

Answer 3

一个简单的解决方案是使用网格系统，如网格前端http://purecss.io/grids/ 是的，它还包含CSS重置和默认样式，但它可以节省您大量的时间。你可以

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.0/base-min.css">


<div class="pure-g">

    <div class="pure-u-1-3">
        A
    </div>

    <div class="pure-u-1-3">
        B
    </div>

    <div class="pure-u-1-3">
        C
    </div>

    <div class="pure-u-1-3">
        D
    </div>

    <div class="pure-u-1-3">
        E
    </div>
    <div class="pure-u-1-3">
        F
    </div>

</div>

使列布局按顺序流动

3 个答案: