1.自适应布局方式:单列定宽,单列自适应布局
- float + margin + (fix)
- 自适应的一列外侧增加一层结构.rightWrap并设置浮动。要实现自适应效果,.rightWrap宽度必须设置为100%。若不设置,float后的元素宽度将由内容撑开。
- 同时再配合盒模型属性的计算(left盒子宽度为x),设置计算后的负margin值(即margin-left: - X px;),使两列元素在同一行显示。
- 同时两列之间的间距由.right的margin值确定。
- 由于右侧元素会层叠在左侧元素之上,.left需要使用relative来提升层级
<style>
p{margin: 0;}
.parent{overflow: hidden;zoom: 1;}
.left{position: relative;float: left;width: 100px;}
.rightWrap{float: left;width: 100%;margin-left: -100px;}
.right{margin-left: 120px;}
</style>
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="rightWrap" style="background-color: pink;">
<div class="right" style="background-color: lightgreen;">
<p>right</p>
<p>right</p>
</div>
</div>
</div>
- float + margin + calc
<style>
p{margin: 0;}
.parent{overflow: hidden;zoom: 1;}
.left{float: left;width: 100px;margin-right: 20px;}
.right{float: left;width: calc(100% - 120px);}
</style>
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
<p>right</p>
</div>
</div>
- float + overflow
- 还可以使用overflow属性来触发bfc,来阻止浮动造成的文字环绕效果。
- 由于使用overflow不会改变元素的宽度属性,所以不需要重新设置宽度。
- 由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性,所以需要设置zoom:1来兼容IE6-浏览器
<style>
p{margin: 0;}
.parent{overflow: hidden;zoom: 1;}
.left{ float: left;width: 100px;margin-right: 20px;}
.right{overflow: hidden;zoom: 1;}
</style>
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
<p>right</p>
</div>
</div>
效果如上
- table
使用table布局的缺点是元素被设置为table后,内容撑开宽度,所以需要设置width:100%。若要兼容IE7-浏览器,需要改为结构。由于table-cell元素无法设置margin,若需要在元素间设置间距,需要增加结构
<style>
p{margin: 0;}
.parent{display:table;width: 100%;table-layout: fixed;}
.left,.rightWrap{display:table-cell;}
.left{width: 100px;}
.right{margin-left: 20px;}
</style>
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="rightWrap" style="background-color: pink;">
<div class="right" style="background-color: lightgreen;">
<p>right</p>
<p>right</p>
</div>
</div>
</div>
- flex
<style>
p{margin: 0;}
.parent{display: flex;}
.left{width:100px;margin-right: 20px;}
.right{flex:1;}
</style>
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
<p>right</p>
</div>
</div>
2. 自适应布局方式:两列自适应布局
是指一列由内容撑开,另一列撑满剩余宽度的布局方式。
- flex
<style>
p{margin: 0;}
.parent{display:flex;}
.right{margin-left:20px; flex:1;}
</style>
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
<p>right</p>
</div>
</div>
- float
- 在单列定宽单列自适应的两列布局中,经常用float和负margin配合实现布局效果。
- 但由于margin取值只能是固定值,所以在两列都是自适应的布局中就不再适用。
- 而float和overflow配合可实现两列自适应效果。使用overflow属性来触发bfc,来阻止浮动造成的文字环绕效果。
- 由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性,所以需要设置zoom:1来兼容IE6-浏览器
<style>
p{margin: 0;}
.parent{overflow: hidden;zoom: 1;}
.left{float: left;margin-right: 20px;}
.right{overflow: hidden;zoom: 1;}
</style>
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
<p>right</p>
</div>
</div>
效果如上!(flex)
3. 圣杯布局:两侧宽度固定,中间宽度自适应的三栏布局。
步骤分析:
-
center 放在dom的最前面,紧接着是left、right,三部分都左浮动float:left。
-
然后将center的width:100%实现自适应,left和right会跳到下一行。
-
通过设置margin-left:为负值,让left和right上去,与center在同一行。
-
通过设置父容器container的padding-left 和padding-right让两边留出空隙
-
使用相对定位让left和right移动到两边
-
不过还需要考虑最后一步,那就是页面的最小宽度:要想保证该布局效果正常显示,由于两侧都具有固定的宽度,所以需要给定页面一个最小的宽度,但这并不只是简单的200+200=400px。回想之前left使用了position: relative,所以就意味着在center开始的区域,还存在着一个left的宽度。200+200+200=600
1.DOM
<div id="header"></div>
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<div id="footer"></div>
body {
min-width: 600px;
}
#container {
padding-left: 200px;
padding-right: 200px;
}
#container .column {
float: left;
text-align: center;
}
#center {
width: 100%;
background-color:cornsilk;
height: 200px;
}
#left {
width: 200px;
margin-left: -100%;
position: relative;
left: -200px;
height: 200px;
background-color: aquamarine;
}
#right {
width: 200px;
margin-left: -200px;
height: 200px;
position: relative;
right: -200px;
background-color: blue;
}
#footer {
clear: both;
text-align: center;
background-color: #ccc;
}
#header {
text-align: center;
background-color: #ccc;
}
缺点:
- center 部分的最小宽度不能小于left部分的宽度,否则会left部分掉到下一行
- 如果其中一列内容高度拉长,其他两列的背景图片不会自动填充。(如下)
双飞翼布局
分析:
先将main部分放好,然后再将“翅膀”移动到相应的位置。
- main放在dom的最前面,紧接着是left、right
- 将main铺满width:100%
- 三部分都是float:left
- 这时将left拉上去margin-left:-100%,同理right使用margin-leftt:-200px。一直到这里都和圣杯布局很类似。
- main被占满了,除了使用container的padding(圣杯),还可以给main增加一个内层div包裹,添加margin: 0 220px 0 220px
<div class="container">
<div class="main">
<div class='inner'></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
.main {
float: left;
width: 100%;
height: 200px;
}
.left {
float: left;
width: 200px;
height: 200px;
margin-left: -100%;
background-color: red;
}
.right {
float: left;
width: 200px;
height: 200px;
margin-left: -200px;
background-color: blue;
}
.inner {
margin: 0 220px;
height: 200px;
background-color: green;
}
等高布局
为了解决圣杯布局第二个缺点,出现等高布局。
设置一个大数值的 padding-bottom,再设置相同数值的负的 margin-bottom,并在所有列外面加上一个容器,并设置 overflow:hidden 把溢出背景切掉。
注意不同点:left 、right height数值跟center不一样 但是能和center高度一样
body {
min-width: 600px;
}
#container {
padding-left: 200px;
padding-right: 200px;
overflow: hidden;
}
#container .column {
float: left;
text-align: center;
padding-bottom: 100000px;
margin-bottom: -100000px;
}
#center {
width: 100%;
background-color:cornsilk;
height: 600px;
}
#left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
height: 200px;
background-color: aquamarine;
}
#right {
width: 200px;
margin-right: -200px;
height: 200px;
background-color: blue;
}
#footer {
clear: both;
text-align: center;
background-color: #ccc;
}
#header {
text-align: center;
background-color: #ccc;
}
<div id="header">头部</div>
<div id="container">
<div id="center" class="column">中间
<br>q
<br>q
<br>q
<br>
<br>q
<br>q
<br>q
<br>q
<br>q
<br>q
<br>q
<br>q
<br>q
<br>q
<br>q
<br>q
<br>q
<br>q
<br>q
<br>q
<br>q
<br>q
<br>q
<br>
<br>
<br>q
<br>q
<br>q
<br>q
<br>q
</div>
<div id="left" class="column">左边</div>
<div id="right" class="column">右边</div>
</div>
<div id="footer">脚部</div>
粘连布局
footer紧跟mian下面 或mian长度不够时在屏幕最下面
<div id="wrap">
<div class="main">
mian <br>
main <br>
mian <br>
main <br>
mian <br>
main <br>
mian <br>
main <br>
mian <br>
main <br>
mian <br>
main <br>
mian <br>
main <br>
mian <br>
main <br>
mian <br>
main <br>
mian <br>
main <br>
mian <br>
main <br>
mian <br>
main <br>
mian <br>
main <br>
</div>
</div>
<div id="footer"> footer</div>
* {
margin: 0;
padding: 0;
}
html ,body{
height: 100%;
}
#wrap {
min-height: 100%;
background: rgb(201, 231, 69);
text-align: center;
overflow: hidden;
}
#wrap .main {
padding-bottom: 50px;
}
#footer{
height: 50px;
line-height: 50px;
background: deeppink;
text-align: center;
margin-top: -50px;
}
参考来源: