CSS網頁布局入門教程7:二列固定寬度置中_基礎教程

來源:互聯網
上載者:User
在一列固定寬度之中,我們使用margi: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"> <!-- #layout { width: 404px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #left { background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 300px; width: 200px; } #right { background-color: #F2FDDB; border: 1px solid #A5CF3D; float: left; height: 300px; width: 200px; } --> </style> </head> <body> 左列 右列 </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
#layout有了置中的屬,自然裡邊的內容也能夠做到置中,這裡的問題在於#layout的寬度定義,將#layout的寬度設定為404px,因為在上一個教程中瞭解過,一個對象真正的寬度是由它的各種屬性相加而成,而left的寬度為200px,但左右都有1px的邊距,因此實際寬度是202px,right對象同樣如此,為了讓layout作為容器能夠裝下它們兩個,寬度則變為了left和right的實際寬度和,便設定為了404px,這樣,就實現了二列置中顯示。
二列寬度置中在實際網站上應用是非常廣泛。
  • 相關文章

    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.