フロートのないレイアウト

CSSマークアップにはさまざまな方法があります。 絶対位置に基づいているものもあれば、フロートを使用するものもあります。 最初の方法はレイアウトの「ゴム」を十分にサポートしていませんが、2番目の方法はマークアップに適した方法です。



しかし、多くの強力なツールと同様に、フロートには欠点があります。 そもそも、フロートに基づくレイアウトはそれほど簡単ではなく、フロートは多くのバグの原因であり（主にIEで）、ブラウザ間の互換性を追求する理想的なオプションではありません。



だから、私たちは約に進みます 意味的に正しいレイアウト方法。



通常のマークアップから始めましょう（divに基づく）

  Header

  Body

          Section 1

      Section 2

      Section 3

    

  

  Footer





div' , , , div' , .

1. Header
2. Body
   
       
   1. Section 1
   2. Section 2
   3. Section 3
   
   
     
3. Footer

CSS



«» , .

* {margin:0;padding:0;}

#wp {width:55em;margin:0 auto;list-style-type:none;}

#bd {display:table;}

#doc {display:table-row;}

#s1,#s2,#s3 {display:table-cell;}



IE



IE LI display inline-block, :

1. IE Win {display: inline; zoom: 1}. «zoom:1» hasLayout-. ( layout layout)

2. IE Mac — {display:inline-block;float:left;}



:

• vertical-align LI ,
• width LI

#s1,#s2,#s3,{display:inline;zoom:1;vertical-align:top;}

#s1 {width:12em;}

#s2 {width:29em;}

#s3 {width:14em;}

/*\*//*/

#s1,#s2,#s3 {display:inline-block;float:left;}

#ft {clear:left;}

/**/



Css- , :

• IE (IE 7 IE Mac ) ,
• IE5 Mac <a href=«www.stopdesign.com/examples/ie5mac-bpf» title«»>

IE 5.1 , , <a href=«tjkdesign.com/articles/conditional_comments.asp» title« »> «if lt IE 5.5000»





… , .



, , IE5.5 , . , float- ( ), ( , ).



:

: 210, 400, 190

<a href=«tjkdesign.com/articles/css-layout/?6» title""> %: 20, 60, 20 / (800px/1200px)

<a href=«tjkdesign.com/articles/css-layout/?7» title""> %: 20, 60, 20