[css] 圣杯布局和雙飛翼布局的理解和區別，并用代碼實現

一： section{height: 100%; overflow: hidden;clear:both; } .left{ height: 100%;float:left;width:30%;background: #f00; } .right{ height: 100%;float:right;width:30%; background: #0f0; } .center{ height: 100%;background: #00f;}二： section{ height: 100%;display: flex;justify-content: center;align-items: center;} .left{ height: 100%;flex-basis: 30%;background: #f00; } .right{ height: 100%;flex-basis: 30%;background: #0f0; } .center{ height: 100%;background: #00f; }三： section{ height: 100%;position: relative;} .left{ height: 100%;width: 30%;background: #f00;position: absolute;left:0;top:0; } .right{ height: 100%;width: 30%;background: #0f0;position: absolute;right:0;top:0; } .center{ height: 100%;background: #00f;margin:0 30%; }

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[css] 圣杯布局和双飞翼布局的理解和区别，并用代码实现的全部內容，希望文章能夠幫你解決所遇到的問題。

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