2

隣り合わせに表示されるテキストを含むボックスがいくつかあります。それらはすべて固定幅ですが、高さは可変です（コンテンツによって異なります）。それらは可変幅のコンテナの中にあります。

ボックスが多すぎる場合は、次の行にジャンプして、左からやり直してください。左に浮いた箱を使ってこれを実現しました。これは、行ごとの最初のボックスが次のボックスよりも高い場合に問題を引き起こします。これは、新しい行のボックスが左から開始されないためです。これがデモです：

HTML：

<section>
    <article>One: This ​​​​text is so long, it's so long oh my gosh!</article>
    <article>Two</article>
    <article>Three: bla bla bla bla bla bla bla bla</article>
    <article>Four</article>
</section>​

CSS：

section{
    width: 300px; /* For demo, this can vary */
    overflow: hidden;
}
article{
    float: left;
    width: 100px;
    background: #dddddd;
    padding: 10px;
    margin: 10px;
}
​

また、このJSFiddleを見ると、問題がすぐにわかります。http://jsfiddle.net/dwr6K/ Box "Three"は、Box "One"から始まりますが、ボックス「One」の下の新しい行。clear: left残念ながら、一列にいくつの箱が収まるかわからないので使えません。

これを防ぎ、希望どおりに表示する方法はありますか？

4

4 に答える 4

3

ここ： http： //jsfiddle.net/dwr6K/9/

削除するだけfloat: left;

と追加

display: inline-block;
vertical-align: top;

にarticle。

@JimmyXが指摘したように、Cross-BrowserInline-Blockに関するこの投稿を読んでください。

基本的に、float:leftそれはそれが見つけることができる左端のdivの隣に各要素を固定させることです。したがって、高さが変化すると、目的のレイアウトが得られません。

于 2012-07-12T21:11:50.330 に答える
3

古いブラウザのサポートについてあまり心配していない場合は、display: inline-block代わりに使用できます。float: left

これは、の癖のより詳細な要約です。display: inline-block

例を機能させるには、次を使用します。

article {
    display: inline-block;
    vertical-align: top;
    width: 100px;
    background: #dddddd;
    padding: 10px;
    margin: 10px;
}
于 2012-07-12T21:14:49.053 に答える
0

高さがすべて異なる場合は、jQueryプラグインMasonaryをご覧ください-http : //masonry.desandro.com/

于 2012-07-12T21:05:08.563 に答える
0

2つのdivのみをペアにする場合は、奇数のdivごとにクリアレフトを使用できます。参照： http： //jsfiddle.net/dwr6K/

つまり、行を追加しますarticle:nth-child(odd) { clear: left; }

于 2012-07-12T21:12:52.257 に答える