分享CSS兩列佈局實現方式的總結

這篇文章主要介紹了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 列和 sidebar 列，然後透過 負margin 正確定位 sidebar 列。

把 main 列嵌套在一個 p 裡，該 p 的寬度值設為100%。
最後透過設定 main 列的 margin-left 消除被 sidebar 覆蓋的部分即可。

以上是分享CSS兩列佈局實現方式的總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！