DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> DIV+CSS布局:兩列固定寬度
DIV+CSS布局:兩列固定寬度
編輯:CSS詳解     

上節課學了一列固定寬度居中的方法,今天我們制作兩列固定寬度居中的頁面

1、共需要添加3個div,在兩個div之外再加一個父div,代碼如下:

<div id="content">
<div id="left">此處內容顯示在左邊</div>
<div id="main">此處內容顯示在右邊</div>
</div>

下面#content的樣式,設計#left的寬度為150px,#main寬度為350px,那麼#content的寬度應該為這兩者之和500px,然後設置#content居中,那麼整體就居中了。
代碼:

  <!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" />  <style>  #content { width:500px; margin:0 auto;}  #left { background: #99FF99; height: 300px; width: 150px; float: left; }  #main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }  </style>  </head>  <body>  <div id="content">  <div id="left">此處內容顯示在左邊</div>  <div id="main">此處內容顯示在右邊</div>  </div>  </body>  </html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved