CSS左列固定,右列寬度自適應(yīng)_Div+CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
在實際應(yīng)用中,有時候需要左欄固定寬度,右欄根據(jù)瀏覽器窗口大小自動適應(yīng),在CSS中實現(xiàn)這樣的布局方式是簡單可行的,只需在設(shè)置左欄的寬度即可,如上例中左右欄都采用了百分比實現(xiàn)了寬度自適應(yīng),而我們只需要將左欄寬度設(shè)定為固定值,右欄不設(shè)置任何寬度值,并且右欄不浮動,代碼如下:
#left {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
float: left;
height: 300px;
width: 200px;
}
#right {
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
height: 300px;
}
這樣,左欄將呈現(xiàn)100%的寬度,而右欄將根據(jù)瀏覽器窗口大小自適應(yīng)。
本文來源與模板無憂_www.hl5o.cn 模板無憂_www.hl5o.cn
二列右列寬度自適應(yīng)經(jīng)常在網(wǎng)站在用到,不僅是右列,也可以是左列,方法是一樣的,只需要改變兩個div的編寫即可,而這種應(yīng)用在目前的許多blog都能夠經(jīng)�?吹�,如pjblog中的許多網(wǎng)友制作的模板就是這種布局的。
制作過程這里不再詳細贅述,請參考上一教程:CSS網(wǎng)頁布局入門教程5:二列寬度自適應(yīng),只需將左列的寬度改為200px,右列的寬度和向左浮動去掉即可。如還有不明白地方您可以在評論中提問。
相關(guān)Div+CSS教程:
- DIV+CSS設(shè)計的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對聯(lián)廣告不隨屏幕滾動的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級元素和內(nèi)聯(lián)元素
- 5個你該知道的CSS3新技術(shù)
- 用正則表達式替換a標記href值
- 30個優(yōu)秀的CSS導航和按鈕設(shè)計教程
- css中px和em有什么區(qū)別
- 相關(guān)鏈接:
- 教程說明:
Div+CSS教程-CSS左列固定,右列寬度自適應(yīng)
。