1、三列布局,中间自适应
<div class="container"> <div class="left"></div> <div class="right"></div> <div class="center"></div> </div>
*{
margin:0;
padding:0;
}
.container{
min-width: 650px;
width: 80%;
height: 1200px;
margin:0 auto; //此处设置让包裹器自适应剧中
background-color: aqua;
position: relative;//此处设置让该容器作为触发bfc元素的父级,使子类始终在该包裹器内
}
.left{
top:0;
position: absolute;//触发bfc,脱离文档流,通过left或者right定位
width:200px;
height:100%;
left:0;
background-color: red;
}
.right{
top:0;
right:0;
position: absolute;
width:200px;
height:100%;
float: right;
background-color: black;
}
.center{
min-width: 200px;
margin:0 210px;
background-color: yellow;
height:500px;
}
不足:如果顶部还有自适应高度的东西,如导航,则top的值难以确定.
好处:三个div的位置可以随意替换. 这样可以实现优先展示中间区域的内容:先写中间区域的内容
2、使用浮动
<div class="container"> <div class="left"></div> <div class="right"></div> <div class="center"></div> </div>
*{ margin:0; padding:0; } .container{ min-width: 650px; width: 80%; height: 1200px; margin:0 auto; //此处设置让包裹器自适应剧中 background-color: aqua; } .left{ float:left; width:200px; height:100%; left:0; background-color: red; } .right{ float:right; width:200px; height:100%; float: right; background-color: black; } .center{ min-width: 200px; margin:0 210px; background-color: yellow; height:500px; }
不足:center必须写在最后
3、圣杯模式
圣杯布局的原理是margin负值法。使用圣杯布局首先需要在center元素外部包含一个div，包含div需要设置float属性使其形成一个BFC，并设置宽度，并且这个宽度要和left块的margin负值进行配合
<div class="container"> <div class="wrapper"> <div class="center"></div> </div> <div class="left"></div> <div class="right"></div> </div>
*{ margin:0; padding:0; } .container{ min-width: 650px; width: 80%; height: 1200px; margin:0 auto; //此处设置让包裹器自适应剧中 background-color: aqua; } .wrapper{ width: 100%; height:100%; float:left; } .center{ margin:0 210px; background-color: black; height: 100%; } .left{ float:left; background-color: yellow; width:200px; height:100%; margin-left: -100%; } .right{ float:left; background-color: yellow; width:200px; height:100%; margin-left: -200px; }
center必须先写,然后left和right利用margin的负值实现布局;
要点:对于left快的margin负值一定要等于wrap的宽度。
4、css3新特性
在外围包裹一层div，设置为display：flex；中间设置flex：1；但是盒模型默认紧紧挨着，可以使用margin控制外边距。
<div id = "box"> <div id = "left_box"></div> <div id = "center_box"></div> <div id = "right_box"></div> </div>
#box{width:100%;display: flex; height: 100px;margin: 10px;} #left_box,#right_box{width: 200px;height: 100px; margin: 10px; background-color: lightpink} #center_box{ flex:1; height: 100px;margin: 10px; background-color: lightgreen}
注意： center一定要放到中间。
来源：博客园
作者：存在的人
链接：https://www.cnblogs.com/Ashton-ldb/p/11469973.html