使用‘聖杯布局’、‘雙飛翼布局’來解釋自適應的三欄水平布局

實現三欄水平布局，其中left、right分別位於左右兩側，left寬度為200px，right寬度為300px，main處在中間，寬度自適應。

如圖，要實現 左右固定 中間寬度自適應

A:聖杯布局

----------------------HTML------------------------

<div id="header">header</div>
<div id="content">
<div id="middle">middle</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>

----------------------CSS------------------------

#header,
#footer {
height: 50px;
line-height: 50px;
background: #666;
text-align: center;
color: #fff;
font-size: 16px;
}

#content {
/*左右欄通過添加負的margin放到正確的位置了，此段代碼是為了擺正中間欄的位置*/
padding: 0 200px 0 180px;
height: 100px;
}

#middle {
float: left;
width: 100%;
/*左欄上去到第一行*/
height: 100px;
background: blue;
line-height: 100px;
color: #fff;
font-size: 16px;
text-align: center;
}

#left {
float: left;
width: 180px;
height: 100px;
line-height: 100px;
margin-left: -100%;
background: #0c9;
/*中間欄的位置擺正之後，左欄的位置也相應右移，通過相對定位的left恢復到正確位置*/
position: relative;
left: -180px;
color: #fff;
font-size: 16px;
text-align: center;
}

#right {
float: left;
width: 200px;
height: 100px;
line-height: 100px;
margin-left: -200px;
background: #0c9;
/*中間欄的位置擺正之後，右欄的位置也相應左移，通過相對定位的right恢復到正確位置*/
position: relative;
color: #fff;
font-size: 16px;
text-align: center;
right: -200px;
}

=======================================================================

B:雙飛翼布局
----------------------HTML------------------------

<div class="container">
<div class="main">
<div class="content">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>

----------------------CSS------------------------

.left,
.main,
.right {
float: left;
min-height: 130px;
text-align: center;
}

.left {
margin-left: -100%;
background: green;
width: 200px;
}

.right {
margin-left: -300px;
background-color: red;
width: 300px;
}

.main {
background-color: blue;
width: 100%;
}

.content {
margin: 0 300px 0 200px;
}

========================================================

C:flex布局

----------------------HTML------------------------

<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>

----------------------CSS------------------------

.container {
display: flex;
min-height: 130px;
}

.main {
flex-grow: 1;
background-color: blue;
}

.left {
order: -1;
flex-basis: 200px;
background-color: green;
}

.right {
flex-basis: 300px;
background-color: red;
}

===========================================

D:絕對定位布局

----------------------HTML------------------------

<div class="container">

<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>

----------------------CSS------------------------

.container {
position: relative;
}

.main,
.right,
.left {
top: 0;
height: 130px;
}

.main {
margin: 0 300px 0 200px;
background-color: blue;
}

.right {
position: absolute;
width: 300px;
right: 0;
background-color: red;
}

.left {
position: absolute;
width: 200px;
background-color: green;
left: 0;
}

======================================

demo下載鏈接地址：https://files.cnblogs.com/files/leshao/%E4%B8%89%E6%A0%8F%E6%B0%B4%E5%B9%B3%E8%87%AA%E9%80%82%E5%BA%94%E5%B8%83%E5%B1%80.rar

參考網絡鏈接：

http://static.vgee.cn/static/index.html

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
https://blog.csdn.net/wangchengiii/article/details/77926868

使用‘聖杯布局’、‘雙飛翼布局’來解釋自適應的三欄水平布局