雙飛翼布局如下圖所示：

有了圣杯布局的鋪墊，雙飛翼布局也就問題不大啦。這里采用經典的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如何实现双飞翼布局？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。