以前做三欄布局時(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>
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里面是沒(méi)有問(wèn)題,但是到了FireFox,則變成下面的樣子了:
,難道這是一個(gè)FireFox的Bug?本來(lái)左右兩邊的寬度固定,而中間的卻沒(méi)有自適應(yīng)寬度。經(jīng)過(guò)與《html5 與css3權(quán)威指南》作者的交流,才知道,之所以出現(xiàn)這樣的情況是因?yàn)闆](méi)有設(shè)置父容器的寬度,當(dāng)我們給父容器加上width:100%就可以了。。。
網(wǎng)站題目:HTML5+CSS3網(wǎng)頁(yè)制作:三欄布局寬度自適應(yīng)
轉(zhuǎn)載源于:http://m.newbst.com/news32/314982.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信公眾號(hào)、域名注冊(cè)、營(yíng)銷型網(wǎng)站建設(shè)、建站公司、ChatGPT、網(wǎng)站導(dǎo)航
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源:
創(chuàng)新互聯(lián)