1.浮动
2.定位
3.flex
4.圣杯布局
5.双飞翼布局
1、浮动
第一种就是浮动:左右浮动 中间不浮动
body {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 200px;
}
.left {
width: 300px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 300px;
height: inherit;
background-color: red;
float: right;
}
.middle {
background-color: rosybrown;
height: inherit;
}
2、定位
使用绝对定位左右定位到两边 中间的根据具体情况设置left和right
body {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 200px;
position: relative;
}
.left {
width: 300px;
height: 200px;
background-color: green;
position: absolute;
left:0;
}
.right{
width: 300px;
height: inherit;
background-color: red;
position: absolute;
right: 0;
}
.middle {
background-color: rosybrown;
height: inherit;
position: absolute;
left: 300px;
right: 300px;
}
3.flex 布局
设置父元素display为flex 实现三栏布局
body {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 200px;
display: flex;
}
.left {
width: 300px;
height: 200px;
background-color: green;
}
.right{
width: 300px;
height: inherit;
background-color: red;
}
.middle {
background-color: rosybrown;
height: inherit;
flex: 1;
}
4.圣杯布局
header和footer各自占领屏幕所有宽度,高度固定。
中间的container是一个三栏布局。
三栏布局两侧宽度固定不变,中间部分自动填充整个区域。
中间部分的高度是三栏中最高的区域的高度。
body {
min-width: 550px; /* 2x leftContent width + rightContent width */
font-weight: bold;
font-size: 20px;
}
#header, #footer {
background: rgba(29, 27, 27, 0.726);
text-align: center;
height: 60px;
line-height: 60px;
}
#footer {
clear: both;
}
#container {
padding-left: 200px; /* leftContent width */
padding-right: 150px; /* rightContent width */
overflow: hidden;
}
#container .column {
position: relative;
float: left;
text-align: center;
height: 300px;
line-height: 300px;
}
#center {
width: 100%;
background: rgb(206, 201, 201);
}
#left {
width: 200px; /* leftContent width */
right: 200px; /* leftContent width */
margin-left: -100%;
background: rgba(95, 179, 235, 0.972);
}
#right {
width: 150px; /* rightContent width */
margin-left: -150px; /* rightContent width */
right: -150px;
background: rgb(231, 105, 2);
}
5、双飞翼布局
双飞翼布局:为了让中间div内容不被遮挡,直接在中间div内部创建子div用于放置内容,在该div里用margin-left和margin-right为左右两栏div留出位置。
代码更简洁
middle放在最前面
middle的width设置100%,left right 各自设置宽度
left middle right 都设置左浮动
此时middle占满了,所以要把left拉到最左边,使用margin-left:-100%;此时left right 都脱离的文档,被middle挤下去了, margin-left 在父子之间,表示元素左外边距和父左内边距的距离,margin设置负数表示往上一个盒子靠近,
使用middle里面的div设置padding,不需要在使用定位了
同理设置right
*{
margin: 0;
padding: 0;
}
.header,
.footer {
height: 100px;
line-height: 100px;
background-color: green;
text-align: center;
font-size: 30px;
font-weight: bolder;
}
.footer {
background-color: goldenrod;
}
.container {
height: 200px;
}
.left {
width: 300px;
height: 200px;
background-color: green;
float: left;
margin-left:-100%;
}
.right{
width: 300px;
height: inherit;
background-color: red;
float: left;
margin-left: -300px;
}
.middle {
background-color: rosybrown;
height: inherit;
width: 100%;
float: left;
}
.inner {
margin: 0 220px 0 200px;
min-height: 130px;
background: blue;
word-break: break-all;
}
middle
middle
中间的盒子
left
左边的盒子
right
右边的盒子