3

新聞・雑誌の記事のように浮かぶレイアウトを目指しています。これは、 jQueryのMasonryが行うことと似ています。しかし、私はCSS3のみを使用してそれを達成しようとしていました。おそらくboxdisplayプロパティでそれができると思いました。何度か試してみましたが、親の列幅が満たされていると、アイテムを下にスライドさせることができませんでした。

CSSのみを使用してこのレイアウトを実現する方法はありますか？

マークアップは次のようになります。

<article>
    <section>...</section>
    <section>...</section>
    <section>...</section>
    <section>...</section>
</article>

ここでは、セクションは左にフロートし、列キューでより適切に調整されます（単純なフロートのように、前のセクションのベースラインを下回らないようにします）。

4

1 に答える 1

4

CSS列を使用することが可能です。ここに良い説明があります。

CSS：

div{
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
width: 480px; }

div a{
display: inline-block; /* Display inline-block, and absolutely NO FLOATS! */
margin-bottom: 20px;
width: 100%; }

HTML：

<div>
<a href="#">Whatever stuff you want to put in here. Images, text, movies, what have you. No, really, anything!</a>
...and so on and so forth ad nauseum.
</div>

また、Googleで「CSSMasonry」を検索してこのサイトを見つけました。2回目の結果でした。

于 2011-11-28T15:50:41.373 に答える