使用‘圣杯布局’、‘双飞翼布局’来解释自适应的三栏水平布局
实现三栏水平布局,其中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;
100%;
/*左栏上去到第一行*/
height: 100px;
background: blue;
line-height: 100px;
color: #fff;
font-size: 16px;
text-align: center;
}
#left {
float: left;
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;
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;
200px;
}
.right {
margin-left: -300px;
background-color: red;
300px;
}
.main {
background-color: blue;
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;
300px;
right: 0;
background-color: red;
}
.left {
position: absolute;
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