html布局 左右固定，中间只适应，三种方法实现

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;
}

牢固的布局跟建房子打地基一样重要