CSSレイアウト奇淫テクニック-幅適応
1650 ワード
cssというものは、難しいと言っても難しくないし、簡単と言っても容易ではない.最も重要なのはやはり経験の蓄積だと思います.いわゆるシリコンステップではなく、千里もありません.この一連の文章はいくつかのcssの特殊なレイアウトの実現を述べて、自分として忘れましょう.
まず3列のレイアウトを話して、左右の2列の幅は固定して、中間の1列の幅は適応します
これはよく実現され、左右の2列がそれぞれ左浮動と右浮動に固定幅を与え、中間は浮動せず、幅も設定しない.これで基本的にいいです.しかし、IEに対応するためには仕事をしなければなりません.
コード構造を見てください.
効果:
中間列はmargin-leftとmargin-rightを設定しますか?
注意、真ん中の列は左右の2つの外距離をそれぞれ左右の2列の幅にする必要があります.そうしないと、問題があります.次のようになります.
Google、火狐などの標準ブラウザの下では、IE 8+を含む:
一方、IE 6、IE 7では、(図は、IE 6の下で切り取られた)
中間列のサブ要素のmargin-leftやmargin-rightの起点が一致していないことがわかり、IE 6、IE 7では、中間列にmargin-leftとmargin-rightを設定しなくても、そのサブ要素の左右の外距離の起点は左右の2列の幅に基づいており、margin-leftとmargin-rightがあるようになっている.だから、各ブラウザが一致するように、真ん中の列にはmargin-leftとmargin-rightを設定したほうがいいです.
IE 6の3 pxギャップバグ
上図のie 6スクリーンショットでは,各列の間に3 pxの間隔があることを示したが,これはIE 6ならではの問題である.
真ん中の列のmargin-leftもmargin-rightも0なら、左の列のmargin-rightを-3 px、右の列のmargin-leftを-3 pxにすればいい.
しかし、中間列のmargin-leftとmargin-rightをそれぞれ左右2列の幅にした場合(上記でもそうしなければならない)、左列のmargin-rightを-3 pxにしても右列のmargin-leftを-3 pxにしても効果はありません.この場合、中間列のmargin-leftを左列幅-3 px、margin-rightを右列幅-3 pxにしなければなりません.次のようになります.
最終コード
2列のレイアウトで、1列の幅が固定され、もう1列の適応レイアウトもこの道理です.
まず3列のレイアウトを話して、左右の2列の幅は固定して、中間の1列の幅は適応します
これはよく実現され、左右の2列がそれぞれ左浮動と右浮動に固定幅を与え、中間は浮動せず、幅も設定しない.これで基本的にいいです.しかし、IEに対応するためには仕事をしなければなりません.
コード構造を見てください.
効果:
中間列はmargin-leftとmargin-rightを設定しますか?
注意、真ん中の列は左右の2つの外距離をそれぞれ左右の2列の幅にする必要があります.そうしないと、問題があります.次のようになります.
Google、火狐などの標準ブラウザの下では、IE 8+を含む:
一方、IE 6、IE 7では、(図は、IE 6の下で切り取られた)
中間列のサブ要素のmargin-leftやmargin-rightの起点が一致していないことがわかり、IE 6、IE 7では、中間列にmargin-leftとmargin-rightを設定しなくても、そのサブ要素の左右の外距離の起点は左右の2列の幅に基づいており、margin-leftとmargin-rightがあるようになっている.だから、各ブラウザが一致するように、真ん中の列にはmargin-leftとmargin-rightを設定したほうがいいです.
IE 6の3 pxギャップバグ
上図のie 6スクリーンショットでは,各列の間に3 pxの間隔があることを示したが,これはIE 6ならではの問題である.
真ん中の列のmargin-leftもmargin-rightも0なら、左の列のmargin-rightを-3 px、右の列のmargin-leftを-3 pxにすればいい.
しかし、中間列のmargin-leftとmargin-rightをそれぞれ左右2列の幅にした場合(上記でもそうしなければならない)、左列のmargin-rightを-3 pxにしても右列のmargin-leftを-3 pxにしても効果はありません.この場合、中間列のmargin-leftを左列幅-3 px、margin-rightを右列幅-3 pxにしなければなりません.次のようになります.
最終コード
left
right
center
2列のレイアウトで、1列の幅が固定され、もう1列の適応レイアウトもこの道理です.