海燕网站建设公司,深圳官网设计,重庆建筑人才网招聘,网络营销的推广1.什么是圣杯布局#xff1f;
左右盒子固定#xff0c;中间盒子自适应
2.实现方式
#xff08;1#xff09;flex布局
思路#xff1a;左右盒子给固定的宽高#xff0c;中间盒子flex:1 !DOCTYPE html html langen head met…1.什么是圣杯布局
左右盒子固定中间盒子自适应
2.实现方式
1flex布局
思路左右盒子给固定的宽高中间盒子flex:1 !DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head style * { margin: 0; padding: 0; } .box { display: flex; width: 100vw; height: 100vh; } .one { width: 20vw; height: 20vh; background-color: yellowgreen; } .two { flex: 1; height: 20vh; background-color: plum; } .three { width: 20vw; height: 20vh; background-color: pink; } /style body div classbox div classone盒子1/div div classtwo盒子2/div div classthree盒子3/div /div /body /html 2浮动
思路左盒子左浮右盒子右浮中间盒子不动要注意布局顺序盒子3在盒子2前面 !DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head style * { margin: 0; padding: 0; } .box { width: 100vw; height: 100vh; } .one { float: left; width: 20vw; height: 20vh; background-color: yellowgreen; } .two { height: 20vh; background-color: yellow; } .three { float: right; width: 20vw; height: 20vh; background-color: pink; } /style body div classbox div classone盒子1/div div classthree盒子3/div div classtwo盒子2/div /div /body /html 3定位
思路父级相对定位、左右绝对定位中间盒子不动 !DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head style * { margin: 0; padding: 0; } .box { position: relative; width: 100vw; height: 100vh; } .one { position: absolute; top: 0; left: 0; width: 20vw; height: 20vh; background-color: yellowgreen; } .two { height: 20vh; background-color: plum; } .three { position: absolute; top: 0; right: 0; width: 20vw; height: 20vh; background-color: pink; } /style body div classbox div classone盒子1/div div classtwo盒子2/div div classthree盒子3/div /div /body /html
