双飞翼布局

一、flex实现

代码如下：

<header></header>

<div class="container">

    <div class="left"></div>

    <div class="center"></div>

    <div class="right"></div>

</div>

<footer></footer>

 

header {

height: 20px;

background-color:  skyblue;

}

.container {

display: flex;

width: 100%;

}

.left {

width: 200px;

height:400px;

background-color: red;

}

.center {

flex-grow: 1;

height: 400px;

background-color:: pink;

}

.right {

 

width: 200px;

 

height:400px;

background-color: yellow;

 

}

footer {

 

height: 20px;

 

background-color: salmon;

 

}

 

二、float实现

<header></header>

<div class="container">

    <div class="center"></div>

    <div class="left"></div>

    <div class="right"></div>

</div>

<footer></footer>