最新文章專(zhuān)題視頻專(zhuān)題問(wèn)答1問(wèn)答10問(wèn)答100問(wèn)答1000問(wèn)答2000關(guān)鍵字專(zhuān)題1關(guān)鍵字專(zhuān)題50關(guān)鍵字專(zhuān)題500關(guān)鍵字專(zhuān)題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專(zhuān)題關(guān)鍵字專(zhuān)題tag2tag3文章專(zhuān)題文章專(zhuān)題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專(zhuān)題3
問(wèn)答文章1 問(wèn)答文章501 問(wèn)答文章1001 問(wèn)答文章1501 問(wèn)答文章2001 問(wèn)答文章2501 問(wèn)答文章3001 問(wèn)答文章3501 問(wèn)答文章4001 問(wèn)答文章4501 問(wèn)答文章5001 問(wèn)答文章5501 問(wèn)答文章6001 問(wèn)答文章6501 問(wèn)答文章7001 問(wèn)答文章7501 問(wèn)答文章8001 問(wèn)答文章8501 問(wèn)答文章9001 問(wèn)答文章9501
當(dāng)前位置: 首頁(yè) - 科技 - 知識(shí)百科 - 正文

不用float實(shí)現(xiàn)div模塊居中布局_經(jīng)驗(yàn)交流

來(lái)源:懂視網(wǎng) 責(zé)編:小采 時(shí)間:2020-11-27 18:54:50
文檔

不用float實(shí)現(xiàn)div模塊居中布局_經(jīng)驗(yàn)交流

不用float實(shí)現(xiàn)div模塊居中布局_經(jīng)驗(yàn)交流:最常見(jiàn)的div+css網(wǎng)頁(yè)布局形式:上、中左、中右、底四個(gè)模塊,寬度760px,整體頁(yè)面居中。 結(jié)構(gòu)代碼,top left right foot 四個(gè)模塊全部獨(dú)立、互不嵌套。 <div id=top>head</div> <div id=left> <div id=left_module
推薦度:
導(dǎo)讀不用float實(shí)現(xiàn)div模塊居中布局_經(jīng)驗(yàn)交流:最常見(jiàn)的div+css網(wǎng)頁(yè)布局形式:上、中左、中右、底四個(gè)模塊,寬度760px,整體頁(yè)面居中。 結(jié)構(gòu)代碼,top left right foot 四個(gè)模塊全部獨(dú)立、互不嵌套。 <div id=top>head</div> <div id=left> <div id=left_module

最常見(jiàn)的div+css網(wǎng)頁(yè)布局形式:上、中左、中右、底四個(gè)模塊,寬度760px,整體頁(yè)面居中。

結(jié)構(gòu)代碼,top left right foot 四個(gè)模塊全部獨(dú)立、互不嵌套。

<div id="top">head</div>

<div id="left">
<div id="left_module">left</div>
</div>

<div id="right">
<div id="right_module">right</div>
</div>

<div id="foot" >foot</div>

頂部屬于常規(guī)定義。

#top { height:100px; background:#ccc; width:760px; margin:auto; text-align:center;}

方法A: 外層left定義為760px寬并居中;內(nèi)層left_module定義為實(shí)際的左側(cè)寬度280px,且絕對(duì)定位,top值等于頂部定義的高度。
這種方法的好處是:left right 兩個(gè)模塊代碼片斷可以互換調(diào)整顯示優(yōu)先級(jí)。

#left { width:760px; margin:auto;}
#left_module { width:280px; position:absolute; top:100px; padding:10px;}

方法B: 外層left定義為760px寬并居中,相對(duì)浮動(dòng)于top;內(nèi)層left_module定義為實(shí)際的左側(cè)寬度280px,且絕對(duì)定位。
這種方法的好處是:頂部的高度可以自由延伸。

#left { width:760px; margin:auto; position:relative;}
#left_module { width:280px; position:absolute; padding:10px;}

外層right定義為760px寬并居中,內(nèi)層right_module定義為實(shí)際的右側(cè)寬度440px,使用margin語(yǔ)法居左。right_module定義的背景色是實(shí)際右側(cè)的背景色,定義的高度就是實(shí)際中間模塊的高度;right的背景色就是實(shí)際左側(cè)的背景色。

#right { width:760px; margin:auto; background:#E8E8E8;}
#right_module { width:440px; background:#F0F0F0; height:360px; margin:0 0 0 auto; padding:10px;}

底部也屬于常規(guī)定義。

#foot { height:100px; background:#ccc; width:760px; margin:auto; text-align:center;}

測(cè)試環(huán)境IE6.0和FF1.5,都是最俗的語(yǔ)法,非常簡(jiǎn)單,實(shí)用有限,可做技術(shù)參考。

聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

文檔

不用float實(shí)現(xiàn)div模塊居中布局_經(jīng)驗(yàn)交流

不用float實(shí)現(xiàn)div模塊居中布局_經(jīng)驗(yàn)交流:最常見(jiàn)的div+css網(wǎng)頁(yè)布局形式:上、中左、中右、底四個(gè)模塊,寬度760px,整體頁(yè)面居中。 結(jié)構(gòu)代碼,top left right foot 四個(gè)模塊全部獨(dú)立、互不嵌套。 <div id=top>head</div> <div id=left> <div id=left_module
推薦度:
標(biāo)簽: 居中 模塊 布局
  • 熱門(mén)焦點(diǎn)

热门图文

猜你喜歡

專(zhuān)題
Top
fffffffffffff

抖音扫码关注

手机端二维码

每天分享百科知识!