0

私のサイトには 3 つの列があり、見た目は気に入っていますが、コードは適切ではありません (ブログの投稿のようなものなので、最初の列が最新で、最後が最後の列になると思います.

しかし、構造のために、列全体に別々に並べる必要がありますが、これは少し面倒であり、より良い解決策があると確信しています。私は 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/umbriel/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 に答える