萬盛學電腦網

浏覽器 windows 10 wps office 殺毒軟件 數據庫 excel教程 文件管理 word教程 網頁制作 裝機必備軟件 linux教程

萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS網頁布局入門教程7：二列固定寬度居中

CSS網頁布局入門教程7：二列固定寬度居中

class="area">

在一列固定寬度之中，我們使用margin:0px auto;這樣的設置，使一個div得以達到居中顯示，而二列分欄中，需要控制的是左分欄的左邊與右分欄的右邊相等，因此使用margi:0px auto;似乎不能夠達到這樣的效果，這時就需要進行div的嵌套式設計來完成了，可以使用一個居中的div作為容器，將二列分欄的兩個div放置在容器中，從而實現二列的居中顯示，結合上面的代碼，新的XHTML代碼結構如下：

<!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">  </style> </head> <body> <div id="layout"> <div id="left">左列</div> <div id="right">右列</div> </div> </body> </html>

#layout有了居中的屬性，自然裡邊的內容也能夠做到居中，這裡的問題在於#layout的寬度定義，將#layout的寬度設定為404px，因為在上一個教程中了解過，一個對象真正的寬度是由它的各種屬性相加而成，而left的寬度為200px，但左右都有1px的邊距，因此實際寬度是202px，right對象同樣如此，為了讓layout作為容器能夠裝下它們兩個,寬度則變為了left和right的實際寬度和，便設定為了404px，這樣，就實現了二列居中顯示。
二列寬度居中在實際網站上應用是非常廣泛。

萬盛學電腦網

萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS網頁布局入門教程7：二列固定寬度居中

CSS網頁布局入門教程7：二列固定寬度居中

DivCSS教程排行

程序編程推薦

熱門文章

相關文章

圖片文章

ubuntu12.04安裝tftp、配置tftp服務錯誤

15個創意紛呈的靈感發掘網站

你應掌握的11個創新布局技法

struts2中一個表單中提交多個請求的例子

萬盛學電腦網 | 設為首頁 | 加入收藏