css3布局-左右两栏固定宽度,中间栏优先加载
2015-09-11 11:51
711 查看
直接上代码
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>自适应宽度,左右两栏固定宽度,中间栏优先加载</title> <style> .container{ display:-moz-box; display:-webkit-box; } div{ padding:10px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .sider_l{ width:250px; -moz-box-ordinal-group:1; -webkit-box-ordinal-group:1; background:limegreen; } .middle_content{ -moz-box-flex:1; -webkit-box-flex:1; -moz-box-ordinal-group:2; -webkit-box-ordinal-group:2; background:lightpink; } .sider_r{ width:250px; -moz-box-ordinal-group:3; -webkit-box-ordinal-group:3; background:green; } </style> </head> <body> <div class="container"> <div class="middle_content">优先加载主内容区</div> <div class="sider_l">左边栏</div> <div class="sider_r">右边栏</div> </div> </body> </html>
相关文章推荐
- CSS布局-两边固定,中间自适应
- CSS权重的问题:选择器权重值的计算
- css伪元素before/after和画三角形的搭配应用
- css样式选择器优先级
- CSS温故第四天【框模型】
- 10个顶级的免费 CSS3 代码生成器
- 18个你可能不相信是用CSS制作出来的东西
- CSS匹配原理
- 设计更快的网页(三):字体和 CSS 调整
- CSS中background-position的使用
- iOS 绘制纯圆形样式的image图片的方法
- CSS定位
- 在UWP中自定义半边框样式的输入框
- CSS 伪类和伪元素--pseudo
- CSS布局
- js获取元素经过计算的css样式
- css
- 【前端学习笔记】2015-09-10~~~~ css层叠样式表~~格式
- SQLServer中DateTime转换成Varchar样式
- CSS清除浮动