内容简介:圣杯布局、双飞翼布局,本质上都是三栏布局──中间自适应两边固定宽。有一次面试,要求写出三种实现方式,结果只写出了两种,面试官说基础还不够扎实圣杯HTML结构:双飞翼HTML结构为:
圣杯布局、双飞翼布局,本质上都是三栏布局──中间自适应两边固定宽。有一次面试,要求写出三种实现方式,结果只写出了两种,面试官说基础还不够扎实
圣杯布局
圣杯HTML结构:
<div class='main'> <div class="middle">中间的</div> <div class="left">左边的</div> <div class="right">右边的</div> </div>
双飞翼布局
双飞翼HTML结构为:
<div class='main'> <div class="middle"> <div class="inner_middle">中间的</div> </div> <div class="left">左边的</div> <div class="right">右边的</div> </div>
一、float+margin
<style type="text/css"> .main{ overflow: hidden; background: #eee; } .left{ background: red; width: 200px; height: 280px; float: left; } .right{ background: blue; width: 200px; height: 290px; float: right; } .middle{ background: green; height: 300px; margin-left: 200px; margin-right: 200px; } </style> <div class="main"> <div class="left"></div> <div class="right"></div> <div class="middle"></div> </div>
说明:网上还有人用padding替换margin的方法,感兴趣的自己去查。
二、Position
<style type="text/css"> .main{ position: relative; } .left{ background: red; height: 300px; width: 200px; position: absolute; left: 0; top: 0; } .right{ background: blue; height: 300px; width: 200px; position: absolute; right: 0; top: 0; } .middle{ background: green; height: 300px; width: 100%; } </style> <div class="main"> <div class="left"></div> <div class="center"></div> <div class="middle"></div> </div>
说明:网上有人提到这个方法在某些情况下会出现bug,具体没有深入了解过。
三、Flex
<style type="text/css"> .main{ display: flex; align-items: center; } .left{ background: red; width: 200px; height: 300px; } .right{ background: blue; width: 200px; height: 300px; } .middle{ background: green; height: 300px; width: 100%; } </style> <div class="main"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div>
说明:低版本的浏览器有兼容的问题,在网上也看到有人用order控制位置
四、Grid
<style type="text/css"> .main{ display: grid; height: 300px; } .left{ background: red; grid-row:1; grid-column:1/2; } .right{ background: blue; grid-row:1; grid-column:4/5; } .middle{ background: green; grid-row:1; grid-column:2/4; } </style> <div class="main"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div>
说明:grid-column一共分为5个格,“grid-column:1/2”占了第一个和第二个格,不是指占了二分之一。这个方法兼容性有比较大的问题,网上有不少文章提到浏览器还没有提供支持,实际上新版主流浏览器已经支持了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- CSS布局:如何实现居中布局?
- 响应式布局的实现
- 一个UI布局框架,以最少的代码实现UI设置及布局控制
- Android 实现一个通用的圆角布局
- CSS实现平行四边形布局效果
- Bootstrap禁用响应式布局的实现方法
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。