双飞翼布局----利用float和margin实现双飞翼布局
2017-11-24 15:17
330 查看
双飞翼布局实现两边定宽,中间自适应的三栏布局,中间栏要放在文档流前面以优先渲染。
这里对布局进行改进,会将中间栏放到两边定宽后渲染!
改进原理,就是根据浮动(float)会脱离文档流,先将左右两边的固定进行左右浮动,然后将center进行margin-left和margin-right居中就好!
双飞翼布局的原理
圣杯布局的原理
DEMO
这里对布局进行改进,会将中间栏放到两边定宽后渲染!
HTML代码
<div id="main-content"> <div id="main-left">left容器</div> <div id="main-right">right容器</div> <div id="main-center">center容器</div> </div>
CSS代码
#main-left,#main-right,#main-center{ height: 200px; color: #fff; box-sizing: border-box; padding: 10px; } #main-left{ float: left; background: blue; width: 100px; } #main-right{ float: right; background: green; width: 100px; } #main-center{ margin: 0 100px; background: pink; }
改进原理,就是根据浮动(float)会脱离文档流,先将左右两边的固定进行左右浮动,然后将center进行margin-left和margin-right居中就好!
双飞翼布局的原理
圣杯布局的原理
DEMO
相关文章推荐
- 利用float与overflow:hidden实现移动端两栏自适应布局
- 用float和margin实现左右布局
- css利用margin外部尺寸实现等高布局经典案例
- 利用margin实现等高布局
- 不用float实现模块居中布局
- 圣杯布局和双飞翼布局的实现过程
- Android 利用ScrollView实现布局自动滚动
- 关于float和inline-block实现不规则瀑布布局的探索
- 圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例
- 圣杯布局与双飞翼布局的实现&区别
- 【干货】利用MVC5+EF6搭建博客系统(四)(上)前后台页面布局页面实现,介绍使用的UI框架以及JS组件
- 利用 text-align:justify 实现两端对齐布局
- 突然发现position:absolute和margin-left/margin-top搭配实现元素叠加这类非常规布局还是很好用滴
- 利用@media screen实现网页布局的自适应
- 圣杯布局与双飞翼布局的实现思路
- CSS布局中的几个重要属性,width,height,margin,padding,float,position
- CSS学习笔记:横向两列布局(float、margin)
- 利用JPanel类 JFrame JButton 以及布局管理类实现的一个简单布局界面
- 利用@media screen实现网页布局的自适应
- android开发利用tablelayout布局实现登录界面