雙飛翼布局是一種經(jīng)典的網(wǎng)頁布局方式，它主要用于解決三欄布局中中間欄內(nèi)容優(yōu)先加載和顯示的問題。以下是四種使用 CSS 實現(xiàn)雙飛翼布局的方法：
方法一：使用定位（Position） 這種方法依賴于絕對定位和相對定位來實現(xiàn)。但需要注意的是，使用定位可能會影響頁面布局的流動性和可讀性。 <div class=“container”><div class=“left”>左側(cè)欄</div>
<div class=“main”><div class="main-content">中間欄</div></div>
<div class=“right”>右側(cè)欄</div>
</div>.container {
position: relative;
width: 100%;
}.left {
position: absolute;
left: 0;
width: 200px;
background: #f00;
}.main {
margin: 0 220px; /* 留出左右欄的寬度 */
background: #0f0;
}.main-content {
margin: 0 220px; /* 留出左右欄的寬度 */
}.right {
position: absolute;
right: 0;
width: 200px;
background: #00f;
}方法二：使用浮動（Float）和負邊距（Negative Margin） 雙飛翼布局的名字就來源于這種方法，其中間欄使用負邊距來“飛”到左右兩欄的上方。.container {<div class=“container”>
<div class=“main”><div class="main-content">中間欄</div></div>
<div class=“left”>左側(cè)欄</div>
<div class=“right”>右側(cè)欄</div>
</div>
width: 100%;
overflow: hidden; /* 清除浮動影響 */
}.main {
float: left;
width: 100%;
}.main-content {
margin: 0 220px; /* 留出左右欄的寬度 */
}.left, .right {
float: left;
width: 200px;
height: 100%;
position: relative;
}.left {
margin-left: -100%; /* 移到左側(cè) /
left: -200px; / 定位到最左側(cè) */
background: #f00;
}.right {
margin-left: -200px; /* 移到中間欄的右側(cè) /
right: -200px; / 定位到最右側(cè) */
background: #00f;
} 方法三：使用 Flexbox Flexbox 是一個現(xiàn)代的布局模塊，能夠輕松處理各種復雜的布局。<div class=“container”>
<div class=“left”>左側(cè)欄</div>
<div class=“main”>中間欄</div>
<div class=“right”>右側(cè)欄</div>
</div>.container {
display: flex;
}.left {
width: 200px;
background: #f00;
}.main {
flex: 1; /* 占據(jù)剩余空間 */
background: #0f0;
}.right {
width: 200px;
background: #00f;
} 方法四：使用 Grid CSS Grid 是一個強大的二維布局系統(tǒng)，適用于復雜的網(wǎng)頁布局。<div class=“container”>
<div class=“left”>左側(cè)欄</div>
<div class=“main”>中間欄</div>
<div class=“right”>右側(cè)欄</div>
</div>.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
}.left {
background: #f00;
}.main {
background: #0f0;
}.right {
background: #00f;
}