0

我的网站上有三个专栏，我喜欢它的外观，虽然代码不是按顺序排列的（它们就像博客文章，所以我希望第一个是最新的，然后是最后一个帖子。

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

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

一切都好，虽然我更喜欢列中的项目按日期顺序排列，但目前它们按日期顺序排列，但按列排列。

所以总而言之，我希望它们显示在源中，例如

A B C D E F G H I

但显示

A  B  C
D  E  F
G  H  I
4

3 回答 3

1

小注意，这只能在 Firefox 和 chrome 中实现。CSS 中的纯砌体布局根本不可能。对于 Internet Explorer 后退查看 packery：http ://packery.metafizzy.co/

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

演示： http: //jsfiddle.net/gabrieleromanato/tQANc/
演示 V2： http: //jsfiddle.net/umbriel/TzkZ8/
演示 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;
}
于 2013-07-04T12:53:22.323 回答
0

您只需将所有的div class="blog-item vevent">一个接一个地放入一个（并从中<div class="col span_1_of_3">删除）给它们，然后widthcssWidthmarginfloat:left;

于 2013-07-04T12:53:44.083 回答
0

一个简单的解决方案是使用网格系统，例如来自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>
于 2013-07-04T14:55:52.813 回答