1. 固定布局之兩欄布局——邊欄在左邊，主內容在右邊

實現的布局效果：整個布局居中顯示，而且側欄顯示在左邊，主內容在右邊

HTML：

- div.wrapper是主容器，以960px為例，并且居中顯示

- div.header是頁頭部分

- div.sidebar是側欄部分，此處設置為220px的寬度

- div.main-content是主內容部分，此處設置為720px的寬度

- div.footer是頁腳部分

- 文檔流形式是從上往下加載，也就是按這樣的順序加載：header/sidebar/main-content/footer

CSS：

先浮動讓其包裹性和可以設置margin，然后最后清除浮動(清除浮動這一步非常的重要)

但有時候這種結構的布局并不能滿足我們的需要，比如說頁面的（header）部分，背景色占滿了整個瀏覽器的寬度，那么在前面那篇文章中的布局就無法使用，因為其里面有一個“div.wrapper”將整個頁面受限于一定寬度之下。那么要實現頁面部分背景全屏，或者說部分內容全屏，而其他內容居中的效果，我們應該怎么做呢？

2. 實現頁面部分背景全屏，或者說部分內容全屏，而其他內容居中的效果

HTML:

結構其實并不復雜，與前一教程的結構相比，這個結構略顯復雜一點，每個部位都是包含了一個容器“div.container”。此時大家會問，為什么要在每個部分添加一個這樣的容器，難道不能像前面的布局中所言，一個就行嗎？其實要實現上面效果，前面的結構是不滿足我們的需求了，為他使部分背景或背景圖全屏（或者說部分內容全屏）顯示，那么我們就有必要單獨控制部分內容，讓他的寬度是100%。比如說我頭部的內容不想居中，那么我們就可以使用

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的CSS之两栏固定布局（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。