欧美高清videosfreeⅹ,欧美色欧美亚洲另类二区 ,欧美做爰xxxⅹ高潮喷水

QQ 咨詢：361652718 513960520

知識(shí)學(xué)堂

·聯(lián)系電話:+86.023-75585550
·聯(lián)系傳真:+86.023-75585550
·24小時(shí)手機(jī):13896886023
·QQ 咨詢：361652718 513960520

當(dāng)前位置 > 首頁(yè) > 知識(shí)學(xué)堂 > 網(wǎng)站建設(shè)知識(shí)

HTML5+CSS3網(wǎng)頁(yè)制作:三欄布局寬度自適應(yīng)

更新時(shí)間：2012-06-04 | 發(fā)布人：本站 | 點(diǎn)擊率：715 次

以前做三欄布局時(shí)，最常用最簡(jiǎn)單的方法可能就是：采用float+margin來(lái)實(shí)現(xiàn)，而CSS3的時(shí)代，我們可以有另一種比較“時(shí)尚”的方法,就是css3中的盒子模型，代碼如下：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>CSS3三欄布局</title>
 6 <style>
 7     .container{
 8         display:-webkit-box;
 9         display:-moz-box;
10     }
11     div:not(.container){
12         -webkit-border-radius:5px;
13         -moz-border-radius:5px;
14         border-radius:5px;
15         background:#999;
16         border:#00C 2px solid;
17     }
18     
19     #left,#right{
20         width:200px;
21         -webkit-box-sizing:border-box;
22         -moz-box-sizing:border-box;
23         padding:20px;
24     }
25     #middle{
26         padding:20px;
27         -webkit-box-flex:1;
28         -moz-box-flex:1;
29         -webkit-box-ordinal-group:2;
30         -moz-box-ordinal-group:2;
31         margin:0 5px;
32     }
33     #right{
34         -webkit-box-ordinal-group:2;
35         -moz-box-ordinal-group:2;
36     }
37 </style>
38 </head>
39 
40 <body>
41 <header>
42     Css3三欄布局
43 </header>
44 <section>
45     <div class="container">
46         <div id="middle">middle</div>
47         <div id="left">left</div>
48         <div id="right">right</div>
49     </div>
50 </section>
51 </body>
52 </html>

GoogleChrome下運(yùn)行效果如下：

總結(jié)：這里面主要用到了box-flex屬性，這個(gè)屬性主要是讓子容器相對(duì)于父容器將寬度按一定的規(guī)則劃分，如三個(gè)子容器分別設(shè)置box-flex的值為1,2,3則，三個(gè)子容器將按照1:2:3的比例劃分寬度。

當(dāng)然，父容器必須設(shè)置成為盒子模型才可以看到效果，比如display:-webkit-box;display:-moz-box;

然而，如果你直接運(yùn)行上面的代碼，chrome里面是沒有問題，但是到了FireFox，則變成下面的樣子了：

，難道這是一個(gè)FireFox的Bug？本來(lái)左右兩邊的寬度固定，而中間的卻沒有自適應(yīng)寬度。經(jīng)過(guò)與《html5 與css3權(quán)威指南》作者的交流，才知道，之所以出現(xiàn)這樣的情況是因?yàn)闆]有設(shè)置父容器的寬度，當(dāng)我們給父容器加上width:100%就可以了。。。在此感謝《html5 與css3權(quán)威指南》作者……

分享到：