双飞翼布局

创建双飞翼布局

by Boyanliuu

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>双飞翼布局</title>
    </head>
    <body>
        <header> header</header>
        <div class="clearfix wrapper">
        <div class="center-wrapper">
            <div class="center">
                Main content
            </div>
        </div>

            <div class="left">
                Left content
            </div>
            <div class="right">
                right content
            </div>
        </div>
        <footer> footer</footer>
    </body>
</html>

CSS

:root {
    box-sizing: border-box;
}

*,
::before,
::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}


.center{
  background:lightblue;
}

.left{
  background:gold;
}
.right{
  background:yellow;
}
footer , header{
  background:CornflowerBlue;
}


.wrapper{
text-align:center;
}
.left{
  margin-left:-100%;
}

.left, .right{
  width:100px;
  float:left;
}
.right{
  margin-left:-100px;
}
.center-wrapper{
   width: 100%;
   float:left;
}
.center{
   margin: 0 100px;
}

footer{
  clear:both;
}