這篇文章主要介紹了CSS兩列佈局實現方式的總結,討論了包括absolute + margin和float + margin方式的一些實踐和問題,需要的朋友可以參考下
兩列佈局大概是最經典的一種網頁佈局方式了，這篇部落格就是採用的這種佈局。兩列佈局中，以主列(main)是自適應寬度，子列(sidebar)是固定寬度的情形最為常見。
今天就來好好探討如何實現這種定寬+自適應的兩列佈局。
1. absolute + margin 方式
首先想到的是利用 absolute + margin 的方式實作。先看看程式碼：
<p class="container">
<p class="sidebar">子列</p>
<p class="main">主列</p>
</p>.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 列脫離文件流，然後透過 main 列的 margin-left 移除被 sidebar 列覆蓋的部分。如此，我們就實現了定寬 + 自適應的兩列佈局。
（1）列順序調整
在不修改HTML 的情況下，只要簡單修改CSS，我們可以讓左右兩列順序互換，來看程式碼：
.sidebar {
position: absolute;
top: 0;
rightright: 0;
}
.main {
margin-right: 210px;
}（2）主內容列優先顯示
讓我們考慮的更完美一點，可不可以把main 列放sidebar列的前面，使主要內容優先載入渲染？ Let us try！
<p class="container">
<p class="main">主列</p>
<p class="sidebar">子列</p>
</p>做上面的簡單調整即可，CSS不需要任何修改！
（3）問題所在
雖然這種方式的優點很多，但是卻存在一個致命缺點。因為 sidebar 列脫離了文件流，當 sidebar 列比 main 列高時會覆蓋後面的佈局：問題demo。
如果在 container 容器上 新增 overflow:hidden 就會使 sidebar 溢出部分被裁減。在這種佈局方式下，這個問題確實沒有有效的解決方案。
2. float + margin 方式
然後想到的就是float + margin 來實現兩列佈局，首先實現左欄定寬，主內容自適應的兩欄佈局。程式碼如下：
<p class="sidebar">子列</p> <p class="main">主列</p>
.sidebar {
float: left;
width: 200px;
height: 300px;
background-color: rgba(255, 0, 0, .5);
}
.main {
height: 300px;
margin-left: 210px;
background-color: rgba(0, 255, 0, .5);
}這個實作方式比較簡單，先把子列浮到左邊，然後在主列上設定 margin-left 為子列留出顯示空間即可。
那麼，這種方式支不支援調換列的位置呢？當然可以。 CSS程式碼如下：
.sidebar {
float: rightright;
width: 200px;
height: 300px;
background-color: rgba(255, 0, 0, .5);
}
.main {
height: 300px;
margin-right: 210px;
background-color: rgba(0, 255, 0, .5);
}問題所在：
看起來float + margin 方式是個好辦法，然而我們前面提到的主列在前優先顯示的優化卻不能實現。
3. float + 負margin 方式
廢話不多說，直接上程式碼：
<p class="main-wrapper">
<p class="main">主列</p>
</p>
<p class="sidebar">子列</p>.main-wrapper {
float: left;
width: 100%;
}
.main {
height: 100px;
margin-left: 210px;
background-color: rgba(255, 0, 0, .5);
}
.sidebar {
float: left;
width: 200px;
height: 100px;
margin-left: -100%;
background-color: rgba(0, 255, 0, .5);
}把 main 列嵌套在一個 p 裡，該 p 的寬度值設為100%。
最後透過設定 main 列的 margin-left 消除被 sidebar 覆蓋的部分即可。
以上是分享CSS兩列佈局實現方式的總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！
