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;

}

总结

以上是生活随笔为你收集整理的html双翼布局,第19题 CSS如何实现双飞翼布局？的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。