左側(cè)固定寬度，右側(cè)自適應(yīng)寬度的CSS布局
更新時(shí)間：2008年09月29日 20:31:36 作者：
一邊固定寬度，另一邊根據(jù)瀏覽器窗口大小自動(dòng)縮放寬度是這種很常用的布局。特別是在BS項(xiàng)目的界面設(shè)計(jì)中，幾乎都會(huì)用到。
BI上有高手專門討論了這種布局方法，但他用了較多的hack，還回避了IE6的dtd。我在實(shí)際使用中，發(fā)現(xiàn)回避掉IE6的dtd定義后，會(huì)導(dǎo)致ajax模態(tài)框無(wú)法居中（VS的一個(gè)控件，自動(dòng)生成的代碼，很難修改）。 于是自己寫了個(gè)簡(jiǎn)單的左右兩列的布局，沒(méi)用到什么hack，很簡(jiǎn)單，只是練手用用。
css代碼：left和right都貼住左側(cè)。設(shè)置left在right上面(z-index)；在right內(nèi)加個(gè)放內(nèi)容的層(content)；設(shè)置content距離right的左側(cè)為200px，即剛巧等于left的寬度。
* {margin:0; padding:0; list-style:none; }
.wrapper {width: 100%; }
.left {width:200px;background:#fcc; position:absolute; left:0 ;z-index:1 }
.right {width:100%;background:#ccc; position:absolute;left:0}
.content {margin-left:200px;background:#ffc; }
完整代碼
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
css代碼：left和right都貼住左側(cè)。設(shè)置left在right上面(z-index)；在right內(nèi)加個(gè)放內(nèi)容的層(content)；設(shè)置content距離right的左側(cè)為200px，即剛巧等于left的寬度。
復(fù)制代碼 代碼如下:
* {margin:0; padding:0; list-style:none; }
.wrapper {width: 100%; }
.left {width:200px;background:#fcc; position:absolute; left:0 ;z-index:1 }
.right {width:100%;background:#ccc; position:absolute;left:0}
.content {margin-left:200px;background:#ffc; }
完整代碼
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
相關(guān)文章
用CSS讓表格返轉(zhuǎn)的代碼 IE only...2007-03-03
95%的中國(guó)網(wǎng)站需要重寫CSS...2007-01-01
找到html標(biāo)記對(duì)應(yīng)的腳本屬性
找到html標(biāo)記對(duì)應(yīng)的腳本屬性...2006-10-10
HTML5實(shí)戰(zhàn)與剖析之觸摸事件(touchstart、touchmove和touchend)
本文主要介紹HTML5實(shí)戰(zhàn)與剖析之觸摸事件，介紹的比較詳細(xì)，需要的朋友可以參考下。2016-06-06
使用CSS框架布局的缺點(diǎn)和優(yōu)點(diǎn)小結(jié)
本篇文章主要介紹了使用CSS框架布局的缺點(diǎn)和優(yōu)點(diǎn)小結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2007-12-12
在分配ID和類名時(shí)，盡可能保持與表現(xiàn)形式無(wú)關(guān)，例如contleft有可能以后希望出現(xiàn)在右邊。2008-10-10
提高網(wǎng)頁(yè)效率的14條注意事項(xiàng)圖文
內(nèi)容再豐富的網(wǎng)站，如果慢到無(wú)法訪問(wèn)也是毫無(wú)意義的； SEO做的再好的網(wǎng)站，如果搜索蜘蛛抓不到也是白搭； UE設(shè)計(jì)的再人性化的網(wǎng)站，如果用戶連看都看不到也是空談。2008-09-09
word-wrap:break-word 在firefox中不會(huì)起作用，以下是解決辦法2008-10-10
css中的行間距的代碼...2007-08-08
CSS實(shí)現(xiàn)的一個(gè)圖片放大展示的一種思路
CSS實(shí)現(xiàn)的一個(gè)圖片放大展示的一種思路...2007-10-10