CSS網頁布局入門教程6:左列固定,右列寬度自適應_基礎教程

來源:互聯網
上載者:User
在實際應用中,有時候需要左欄固定寬度,右欄根據瀏覽器視窗大小自動適應,在CSS中實現這樣的布局方式是簡單可行的,只需在設定左欄的寬度即可,如上例中左右欄都採用了百分比實現了寬度自適應,而我們只需要將左欄寬度設定為固定值,右欄不設定任何寬度值,並且右欄不浮動,代碼如下:
複製代碼 代碼如下:
#left {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
float: left;
height: 300px;
width: 200px;
}
#right {
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
height: 300px;
}

這樣,左欄將呈現100%的寬度,而右欄將根據瀏覽器視窗大小自適應。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>二列左列固定,右列寬度自適應——AA25.CN</title> <style type="text/css"> <!-- #left { background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 300px; width: 200px; } #right { background-color: #F2FDDB; border: 1px solid #A5CF3D; height: 300px; } --> </style> </head> <body> 左列——固定(AA25.CN) 右列——寬度自適應(AA25.CN) </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
二列右列寬度自適應經常在網站在用到,不公是右列,也可以是左列,方法是一樣的,只需要改變兩個div的編寫即可,而這種應用在目前的許多blog都能夠經常看到,如pjblog中的許多網友製作的模板就是這種布局的。
製作過程這裡不再詳細贅述,請參考上一教程:CSS網頁布局入門教程5:二列寬度自適應,只需將左列的寬度改為200px,右列的寬度和向左浮動去掉即可。如還有不明白地方您可以在下邊提問或在留言本內留言。
  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.