1

li画像やテキストを含むアイテムの幅は同じで高さが異なるようにしたいと考えています。問題は、左にフロートするか、display:inline-block で、アイテムの 1 つが高さを超えている場合です。コンテンツの視覚的なスタイルを乱します。これを管理できる方法はありますか?

私はliが次のような単純なルールに従うことを望んでいます

li {
    float:left;
    display:list-item;
    width:200px;
    background:#CCC;
    height:auto;
    padding:10px;
    margin:0 10px 10px 0;
}

同じものを含むサンプルWebサイトは次のとおりです

ジェニーのウェブサイト

4

3 に答える 3

4

genny.com や pinterest.com などのサイトは要素をフロートせず、絶対に配置し、JS を介して動的に値leftを設定します。topまず、ページ上の要素の数を取得します。次に、要素のheightとを嗅ぎます。3 番目に、とCSS の値widthを変更します。lefttop

Masonryの回答に+1、それがどのように機能するかを説明したかっただけです。

于 2012-08-02T20:37:43.103 に答える
3

jQuery Masonryは、ここで探しているものです。本質的に、li は、望ましくないコードがなければ上のものにぶつかることはありませんが、jQuery プラグインにより、非常にシンプルになります。

于 2012-08-02T20:30:10.453 に答える
3

3 つの列を作成する必要があると思います。何かのようなもの:

<ul id="first column">
    <li>Some content</li>
    <li>Some content</li>
   . . .
</ul>
<ul id="second column">
    <li>Some content</li>
    <li>Some content</li>
   . . .
</ul>
<ul id="third column">
    <li>Some content</li>
    <li>Some content</li>
   . . .
</ul>

その後、li タグをフロートする必要はありません。

于 2012-08-02T20:30:44.213 に答える