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/で入手できます。