使用‘圣杯布局’、‘双飞翼布局’来解释自适应的三栏水平布局

使用‘圣杯布局’、‘双飞翼布局’来解释自适应的三栏水平布局

实现三栏水平布局，其中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