html双翼布局,第19题 CSS如何实现双飞翼布局？

双飞翼布局如下图所示：

有了圣杯布局的铺垫，双飞翼布局也就问题不大啦。这里采用经典的float布局来完成。

HTML代码：

双飞翼布局

码云笔记

mybj123.com

CSS代码：

*{

margin: 0;

padding: 0;

}

.container {

min-width: 600px;

}

.left {

float: left;

width: 200px;

height: 400px;

background: red;

margin-left: -100%;

}

.center {

float: left;

width: 100%;

height: 500px;

background: yellow;

}

.center .inner {

margin: 0 200px;

}

.right {

float: left;

width: 200px;

height: 400px;

background: blue;

margin-left: -200px;

}