CSS经典布局--圣杯布局和双飞翼布局
生活随笔
收集整理的這篇文章主要介紹了
CSS经典布局--圣杯布局和双飞翼布局
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
圣杯布局與雙飛翼布局，都是屬于三列布局的經(jīng)典布局。
雙飛翼布局是圣杯布局的優(yōu)化版，由淘寶UED提出；
它們的效果圖類似，但是實(shí)現(xiàn)方法不同。
文章目錄
- 一、圣杯布局和雙飛翼布局的常規(guī)方法
- 1.圣杯 position 解決（不推薦）：
- 2.雙飛翼布局：
- 二、圣杯布局--flex實(shí)現(xiàn)（推薦）
一、圣杯布局和雙飛翼布局的常規(guī)方法
首先打好底子（兩者共用）
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>1111</title> </head> <style>.header, .footer {height: 50px;background: lightblue;}.center {width: 100%;height: 500px;background: lightgray;float: left;}.left {width: 200px;height: 500px;background: lightpink;float: left;margin-left: -100%; /* 浮動(dòng)，w100%，不在同行 */}.right {width: 300px;height: 500px;background: lightgreen;float: left;margin-left: -300px;}.clearfix::before,.clearfix::after {content: "";display: block;clear: both;} </style><body><div class="header">頭部</div><div class="main clearfix"><!-- 因?yàn)橄鄬?duì)來(lái)說(shuō)，center中為主要內(nèi)容，所以寫前邊，這樣也有利于SEO --><div class="center">中間自適應(yīng)</div><div class="left">左列定寬</div><div class="right">右列定寬</div></div><div class="footer">底部</div> </body></html>
此時(shí) “center” 中間自適應(yīng) 被遮擋
1.圣杯 position 解決（不推薦）：
css
/* 圣杯 */.main {margin-left: 200px;margin-right: 300px;}.left {position: relative;left: -200px;}.right {position: relative;right: -300px;}
解決了遮擋，但是當(dāng)屏幕縮小，布局會(huì)亂！！！
2.雙飛翼布局：
html
// center 加個(gè)div 文字放里面 <div class="center"><div class="inner">中間自適應(yīng)</div> </div>css
/* 雙飛翼 */.inner {/* height: 100%; */margin:0 300px 0 200px;border: 2px solid red;}二、圣杯布局–flex實(shí)現(xiàn)（推薦）
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>圣杯-flex</title> </head> <style>#header, #footer {background: yellowgreen;height: 60px;line-height: 60px;}#container {display: flex;}#container .column {height: 300px;line-height: 300px;}#center {flex-grow: 1;background: gray;}#left {width: 200px;order: -1;background: beige;}#right {width: 200px;background:paleturquoise;} </style><body><div id="header">#header</div><div id="container"><div id="center" class="column">#center</div><div id="left" class="column">#left</div><div id="right" class="column">#right</div></div><div id="footer">#footer</div> </body></html>總結(jié)
以上是生活随笔為你收集整理的CSS经典布局--圣杯布局和双飞翼布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： ROS参数的使用rosparam
- 下一篇： 【CSS】圣杯布局和双飞翼布局（包括完整