當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【经典布局】圣杯布局和双飞翼布局

發布時間：2024/1/18 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了【经典布局】圣杯布局和双飞翼布局小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助文檔

文章目錄

前言
一、兩種布局的對比
二、使用步驟
- 1. 圣杯布局
- 2. 雙飛翼布局
總結

前言

圣杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊頂寬，中間自適應的三欄布局，中間欄要在放在文檔流前面以優先渲染。

一、兩種布局的對比

圣杯布局和雙飛翼的特點：
1、兩邊定寬，中間100%
2、中間部分優先渲染，提升用戶體驗
圣杯布局缺點：當中間區域寬度小于兩邊時，布局會破碎
雙飛翼布局不會破碎

二、使用步驟

1. 圣杯布局

圣杯布局：
步驟：

設置padding給左右兩邊預留空間
負外邊距+相對定位移到空白區域
雙飛翼不會破碎

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>.wrapper>div{float: left;}.wrapper>.center{width: 100%;height: 200px;background-color: green;}.fl,.fr{width: 200px;height: 200px;}/* 2、負外邊距+相對定位移到空白區域 */.fl{background-color: red;/* 負外邊距 */margin-left: -100%;/* 相對定位 */position: relative;left: -200px;}.fr{background-color: blue;margin-left: -200px;position: relative;left: 200px;}/* 1、設置padding給左右兩邊預留空間 */.wrapper{padding-left: 200px;padding-right: 200px;min-width: 600px;}</style></head><body><div class="wrapper"><div class="center">中間</div><div class="fl">左邊</div><div class="fr">右邊</div></div></body> </html>

展現效果：

2. 雙飛翼布局

雙飛翼:
步驟
wrapper(div中(div.contain) div左 div右)

wrapper >div,float:left
div.contain設置左右margin
div左, margin-left:-100%
div右, margin-left: px

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>.wrapper>div{float: left;}.center .contain{height: 200px;margin-left: 200px;margin-right: 200px;}.center{width: 100%;height: 200px;background-color: green;}.fl,.fr{width: 200px;height: 200px;}.fl{background-color: red;margin-left: -100%;}.fr{background-color: blue;margin-left: -200px;}</style></head><body><div class="wrapper"><div class="center"><div class="contain"></div></div><div class="fl"></div><div class="fr"></div></div></body> </html>

展現效果：

總結

以上就是今天要講的內容，本文僅僅簡單介紹了圣杯布局和雙飛翼布局的使用，圣杯布局和雙飛翼的特點就是兩邊定寬，中間100%，中間部分優先渲染，提升用戶體驗。

總結

以上是生活随笔為你收集整理的【经典布局】圣杯布局和双飞翼布局的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： VR/AR安全教育解决方案
下一篇：腾讯高速增长初现天花板微信或将成为未来