2

順序付けられていないリストがあり、各リスト要素には写真と見出しが含まれています。私のCSSは、グリッドをグリッドとして設定します。各行には3枚の写真が含まれています。見出し（または写真のキャプション）が写真の幅より長く、2行にまたがる必要がある場合があります。状況によっては、テキストが2行以上にまたがる場合、その下のリスト要素が右にプッシュされ、リストに大きなギャップがあります。私にとって有効な唯一の修正は、 3つの要素<div style="clear:both"></div>ごとに次のHTMLを追加することです。<li></li>この問題は、リスト要素の3行目に見られます。この問題を調査しようとしましたが、CSSのみの方法は見つかりませんでした。サンプルコードでは、CSS clearfixクラスを適用しましたが、効果がないようです。

最新バージョンのGoogleChromeを使用しています。

これが私のコードです：http：//jsfiddle.net/NVveP/1/

4

1 に答える 1

4

両方を持っているfloat: leftと、強制的に無効になるためdisplay: inline-block、事実上無効になります。display: inline-blockfloat: leftdisplay: block

したがって、削除float: leftするdisplay: inline-blockと作業が可能になり、これを組み合わせることでvertical-align: top、目的のレイアウトを実現できます。

参照： http： //jsfiddle.net/thirtydot/NVveP/3/

display: inline-blockそれが重要な場合は、IE7で動作させるためのハックも追加しました。

フロートでこれを行うのはもっと難しいでしょう。次のような効果が必要です。

li:nth-child(3n+1) {
    clear: both;
}

これには、IE7/8などの古いブラウザでは機能しないという問題があります。display: inline-block幸いなことに、これが解決策であり、フロートではないため、これについて心配する必要はありません。

于 2012-06-20T09:24:16.337 に答える