兩列布局大概是最經(jīng)典的一種網(wǎng)頁(yè)布局方式了，本博客就是采用的這種布局。兩列布局中，以主列(main)是自適應(yīng)寬度，子列(sidebar)是固定寬度的情形最為常見(jiàn)。
今天就來(lái)好好探討一下如何實(shí)現(xiàn)這種定寬+自適應(yīng)的兩列布局。

1. absolute + margin 方式

首先想到的是利用 absolute + margin 的方式實(shí)現(xiàn)。先看看代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<div class="container">  
    <div class="sidebar">子列</div>  
    <div class="main">主列</div>  
</div>  

CSS Code復(fù)制內(nèi)容到剪貼板

.container {   
 position: relative;   
}   
.sidebar {   
 position: absolute;   
 top: 0;   
 left: 0;   
 width: 200px;   
 height: 300px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.main {   
 height: 300px;   
 margin-left: 210px;   
 background-color: rgba(0, 255, 0, .5);   
}  

該方式利用 position 讓 sidebar 列脫離文檔流，然后通過(guò) main 列的 margin-left 移除被 sidebar 列覆蓋的部分。如此，我們就實(shí)現(xiàn)了定寬 + 自適應(yīng)的兩列布局。

（1）列順序調(diào)整

在不修改 HTML 的情況下，只需簡(jiǎn)單修改 CSS，我們可以讓左右兩列順序互換，來(lái)看代碼：

CSS Code復(fù)制內(nèi)容到剪貼板

.sidebar {   
 position: absolute;   
 top: 0;   
 rightright: 0;   
}   
.main {   
 margin-right: 210px;   
}   

（2）主內(nèi)容列優(yōu)先顯示

讓我們考慮的更完美一點(diǎn)，可不可以把 main 列放 sidebar 列 的前面，使主要內(nèi)容優(yōu)先加載渲染？ Let us try！

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<div class="container">  
    <div class="main">主列</div>  
 <div class="sidebar">子列</div>  
</div>  

做上面的簡(jiǎn)單調(diào)整即可，CSS不需要任何修改！

（3）問(wèn)題所在

雖然這種方式的優(yōu)點(diǎn)很多，但是卻存在一個(gè)致命缺點(diǎn)。因?yàn)?sidebar 列脫離了文檔流，當(dāng) sidebar 列比 main 列高時(shí)會(huì)覆蓋后面的布局：?jiǎn)栴}demo。
如果在 container 容器上 添加 overflow:hidden 就會(huì)使 sidebar 溢出部分被裁減。在這種布局方式下，這個(gè)問(wèn)題確實(shí)沒(méi)有有效的解決辦法。