html布局 左右固定,中间只适应,三种方法实现
使用自身浮动法定位
//html
<h3>使用自身浮动法定位</h3>
<div id="left_self"></div>
<div id="right_self"></div>
<div id="center_self"></div>
//style
#left_self,
#right_self {
width: 200px;
height: 100px;
background-color: #ffe6b8
}
#left_self {
float: left;
}
#right_self {
float: right;
}
#center_self {
margin: 0 210px;
height: 100px;
background-color: #a0b3d6
}
使用margin负值法进行布局
//html
<h3>使用margin负值法进行布局</h3>
<div id="wrap">
<div id="center"></div>
</div>
<div id="left_margin"></div>
<div id="right_margin"></div>
//css
#wrap {
width: 100%;
height: 100px;
background-color: #fff;
float: left;
}
#wrap #center {
margin: 0 210px;
height: 100px;
background-color: #ffe6b8;
}
#left_margin,
#right_margin {
float: left;
width: 200px;
height: 100px;
background-color: darkorange
}
#left_margin {
margin-left: -100%;
background-color: lightpink
}
#right_margin {
margin-left: -200px;
}
使用flex
//html
<div id="box">
<div id="left_box"></div>
<div id="center_box"></div>
<div id="right_box"></div>
</div>
//css
#box {
width: 100%;
display: flex;
height: 100px;
}
#left_box,
#right_box {
width: 200px;
height: 100px;
background-color: lightpink
}
#left_box {
margin-right: 10px;
}
#right_box {
margin-left: 10px;
}
#center_box {
flex: 1;
height: 100px;
background-color: lightgreen;
}
牢固的布局跟建房子打地基一样重要