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