固定
自適應
.container
修改css就可實現位置調換，如下：
優點： 交換固定
、自適應
順序 ，實現主要內容優先載入渲染。
缺點：absolute 定位，脫離文件流，當 sidebar 列的高度，超過 main 列的高度，會遮住下面的元素。需要給父盒子設定 overflow 屬性。
固定
自適應
.sidebar
也支援位置調換：
缺點：不能實現主要內容優先載入渲染。
自適應
固定
.wrap
位置調換：
自適應
固定
.container
.main
.sidebar
這裡有一點需要注意：.sidebar沒有設定高度，會和.container保持一樣的高度。.container的高度是被.main撐開的，也就是和.main高度一樣。
位置調換：
自適應
固定
.container
.main
.sidebar
這裡.main和.sidebar高度不單獨設定的話，也是同樣的高度。
位置調換：
.container
固定
自適應
.sidebar
位置調換：
這裡讓.main成為bfc主要是消除.sidebar因float帶來的影響，只要能讓.main成為bfc就行。
此外留給大家乙個思考題，還有沒有其他方式呢？
兩列布局的多種方式
面試的時候真的太常被面到這個問題了！所以還是實踐一下做個筆記吧。html布局如下 class content class left hellop i am leftp div class right hip i am rightp div div body 若不做任何操作，其樣式為 左邊固定為200...
多種方式實現兩列布局
兩列布局使我們再做頁面的時候用的最多的布局方式，也是設計稿種最常見的一種布局型別，一般分為 一列固定寬度另一列自適應寬度，兩列自適應寬度，兩列相同高度等形式 這篇文章將詳細介紹各種兩列布局的實現方式 說起 布局是在css3之前相容性最好的一種布局方式，使用 做兩列自適應寬度或者高度布局能夠在ie6瀏...
CSS兩列布局
在布局中，我們常常需要出現兩列的情況，其中左邊一列固定寬度，右邊一列隨著瀏覽器寬度變化而變化。如何實現呢？傳統的方法是利用float將左部分浮動起來，再通過margin將右部分右移，得到所需效果，如下 css 如下 color blue color yellow background color b...