多くの場合、サイトをレイアウトするとき、可変幅のあるコンテナに同じ幅で異なる高さのブロックを配置することが必要になります（ゴムを読む）。 さらに、このリストにフィルターを適用できます。これにより、
JSはリストの要素を隠したり表示したりしますが、「行」、レイアウト、またはフォームホールを破壊してはいけません。 最も単純な例は製品カタログです。
morfiと
一緒に、不必要な問題なしにそのようなコンテンツを公開できる
多かれ少なかれ普遍的なソリューションを作る
ことにしました。 重要な点は、ブロックの高さが、たとえばタイトルの高さ、またはレイアウト内にある場合は説明に依存する可能性があることです。
2つの落とし穴があります。 1つ目は、ブロック間のギャップです。
float:left; margin-right |bottom:50px置くだけの場合
float:left; margin-right |bottom:50px float:left; margin-right |bottom:50px （構文を簡略化）、「行」の最後の要素は常にインデントされるため、コンテナーの境界線上にはっきりと表示されることはありません。
floatが表面にあるソリューション：
- 要素を
float:left; margin-top |left:50px設定しますfloat:left; margin-top |left:50px float:left; margin-top |left:50px - 要素を別のコンテナでラップし、
margin-top |left:-50px負のインデントを設定し、外側のコンテナ（オリジナル）をラッパー、内側のコンテナをコンテナと呼びます。 - IEと仲良くするには、コンテナとラッパーに
zoom:1を割り当てて、 float要素から崩壊しないようにする必要がありますoverflow:hidden - IEの場合は、
display:inlineを指定する必要がありdisplay:inlineブロックの場合はdisplay:inline 、それ以外の場合は二重のmarginが得られmargin
すべてがうまくいきますが、そのような状況では、ブロックの高さが大きく異なる可能性がある場合、そのような妨害が発生する可能性があります：
ブロック3、4、および5に注意してください。 緑のブロックはラッパー、青はコンテナです。
論理的には、状況は理解できます-ユニットは、それが配置されている線（または「線」）を描画する必要があります。 この動作は
display: inline-block典型的なものです
display: inline-block 。
このソリューションを実行するには、次のものが必要です。
- 再び上記の例のように
marginを設定します - 汎用性のあるクロスブラウザー
display:- moz-inline-box ; display: inline-block ; *zoom:1; *display:inlineデザインをdisplay:- moz-inline-box ; display: inline-block ; *zoom:1; *display:inline配布しdisplay:- moz-inline-box ; display: inline-block ; *zoom:1; *display:inline display:- moz-inline-box ; display: inline-block ; *zoom:1; *display:inline - 水平距離が必要な
50pxより少し大きいことが50pxこれは、 inline-block間のギャップが原因 inline-block - スペースを扱うには、その幅を測定します
4pxを取得16px ます 。これは1em 25％で、 デフォルトでは1em です 。 したがって、 word-spacing :-0.25em設定し、 word-spacing :-0.25em word-spacing :normalます - IEの場合、
text-align :topブロックも登録する必要があります。登録しない場合、要素はベースラインに揃えられます。
バグは確認されていません。解決策はクロスブラウザです。
インラインメソッドは、コンテナの
text-align :centerにある
text-align :center配置に冷静に耐え
text-align :center （
スクリーンショットを参照）。
text-align :leftを設定することを覚えておく必要があり
text-align :leftブロックに戻ります（
style. css参照してください
style. css私はそこにコメントしました）。
作業例は、
http ：
//test.dis.dj/blocks/で入手できます。
追伸 ：このソリューションは新しいものではありませんが、どのような場合でも有用です。
P. P. S.スクリーンショット-将来の母親向け
オンラインストアポータル 。