CSS3+HTML5学习笔记四--CSS三栏布局-宽度只适应

By | 07月08日
Advertisement

三栏布局-宽度只适应

以前做三栏布局时,最常用最简单的方法可能就是:采用float+margin来实现,而CSS3的时代,我们可以有另一种比较“时尚”的方法,就是css3中的盒子模型,代码如下:

 1 <!DOCTYPE HTML>   2 <html>   3 <head>   4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   5 <title>CSS3三栏布局</title>   6 <style>   7     .container{   8         display:-webkit-box;   9         display:-moz-box;  10     }  11     div:not(.container){  12         -webkit-border-radius:5px;  13         -moz-border-radius:5px;  14         border-radius:5px;  15         background:#999;  16         border:#00C 2px solid;  17     }  18       19     #left,#right{  20         width:200px;  21         -webkit-box-sizing:border-box;  22         -moz-box-sizing:border-box;  23         padding:20px;  24     }  25     #middle{  26         padding:20px;  27         -webkit-box-flex:1;  28         -moz-box-flex:1;  29         -webkit-box-ordinal-group:2;  30         -moz-box-ordinal-group:2;  31         margin:0 5px;  32     }  33     #right{  34         -webkit-box-ordinal-group:2;  35         -moz-box-ordinal-group:2;  36     }  37 </style>  38 </head>  39   40 <body>  41 <header>  42     Css3三栏布局  43 </header>  44 <section>  45     <div class="container">  46         <div id="middle">middle</div>  47         <div id="left">left</div>  48         <div id="right">right</div>  49     </div>  50 </section>  51 </body>  52 </html>

GoogleChrome下运行效果如下:

CSS3+HTML5学习笔记四--CSS三栏布局-宽度只适应

总结:这里面主要用到了box-flex属性,这个属性主要是让子容器相对于父容器将宽度按一定的规则划分,如三个子容器分别设置box-flex的值为1,2,3则,三个子容器将按照1:2:3的比例划分宽度。

当然,父容器必须设置成为盒子模型才可以看到效果,比如display:-webkit-box;display:-moz-box;

然而,如果你直接运行上面的代码,chrome里面是没有问题,但是到了FireFox,则变成下面的样子了:

CSS3+HTML5学习笔记四--CSS三栏布局-宽度只适应

,难道这是一个FireFox的Bug?本来左右两边的宽度固定,而中间的却没有自适应宽度。经过与《html5 与css3权威指南》作者的交流,才知道,之所以出现这样的情况是因为没有设置父容器的宽度,当我们给父容器加上width:100%就可以了。。。在此感谢《html5 与css3权威指南》作者……

BY:念在三角湖畔

Similar Posts:

  • CSS3+Html5学习笔记之CSS3多类选择器

    CSS 多类选择器 我们处理了 class 值中包含一个词的情况.在 HTML 中,一个 class 值中可能包含一个词列表,各个词之间用空格分隔.例如,如果希望将一个特定的元素同时标记为重要(important)和警告(warning),就可以写作: <p class="important warning"> This paragraph is a very important warning. </p> 这两个词的顺序无关紧要,写成 warning impo

  • CSS布局:Float布局过程与老生常谈的三栏布局

    原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为首页上的内容往往可以完全控制.后者适合布局模板,模板中填充的内容你没法控制--比如,在编辑wordpress模板时,你肯定没法考虑每篇博文的长度.这篇博文,就是总结一下怎样使用CSS中的float属性进行布局,其实网上有很多讨论这个话题的文章了,但我觉得都没说到点子

  • python3.4学习笔记(四) 3.x和2.x的区别,持续更新

    python3.4学习笔记(四) 3.x和2.x的区别 在2.x中:print html,3.x中必须改成:print(html) import urllib2 ImportError: No module named 'urllib2' 在python3.x里面,用urllib.request代替urllib2 import thread ImportError: No module named 'thread' 在python3.x里面,用_thread(在前面加一个下划线)代替thread

  • css实现三栏布局并居中显示

    使用绝对定位实现三栏布局并居中显示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-e

  • Android学习笔记•从零开始•第三天•Activity

    Android学习笔记•从零开始•第三天•Activity 转载请注明出处:CLeopard http://blog.csdn.net/cleopard 今天主要是对Activity的学习. –>点击进入Android学习笔记导图 http://blog.csdn.net/cleopard/article/details/44037813 –>19本Android经典教程+104个Github上火爆项目开源源码 http://download.csdn.net/album/detail/151

  • 黑马程序员_java自学学习笔记(四)----封装、继承、多态

    黑马程序员_java自学学习笔记(四)----封装.继承.多态 android培训.java培训.期待与您交流! (一) 封装 封装:隐藏对象的属性和实现细节,仅对外公开接口,控制在程序中属性的读取和修改的访问级别. 封装的原则: 1把尽可能多的东西藏起来.对外提供简捷的接口. 2把所有的属性藏起来. 也就是尽量把类中的数据定义为private,留出相应的public方法,能够对数据进行操作.例如: class AAA { private String BB; private int CC; -

  • Sqlite学习笔记(四)&amp;&amp;SQLite-WAL原理 Write ahead logging

    Sqlite学习笔记(四)&&SQLite-WAL原理(转) 2015-08-24 21:55 by 沧海一滴, 90 阅读, 0 评论, 收藏, 编辑 Sqlite学习笔记(三)&&WAL性能测试中列出了几种典型场景下WAL的性能数据,了解到WAL确实有性能优势,这篇文章将会详细分析WAL的原理,做到知其然,更要知其所以然. WAL是什么 WAL(Write ahead logging)是一种日志模式,它是一种思想,普遍应用于关系型数据库.每个事务执行变更时,修改数据页,

  • java学习笔记(四)

    java学习笔记(四) 第22-24集 2008年3月18日 心情不错,下了点小兩 包名与文件目录一样 文件目录用:"/" 包名用:"." 改变环境变量 classpath=%classpath%:d:\; 查看环境变量:classpath 引入一个包的类用import java.io.File; 引入整个包用:import java.io.* 在同一包中的类可以互相引用,不用import语句导入 import java.io.File class test { p

  • spring源码学习笔记-初始化(三)-BeanFactory

    spring源码学习笔记-初始化(三)-BeanFactory 转自http://www.sandzhang.com/blog/2011/04/05/spring-study-notes-initialization-3/ refresh()方法中在上篇obtainFreshBeanFactory()方法创建了beanfactory对象,之后的代码就开始是对beanFactory对象的一些处理,BeanFactory相关的一些内容也是spring的核心内容. 注:refresh()的代码就不再次

  • HTML5学习笔记之audio标签

    HTML5学习笔记之audio标签 在HTML5的新特性中增加了对原生音频文件的支持,可以在播放视频时无需Flash插件. 在页面中嵌入音频可以通过如下的简单代码实现: <audio src="foo.wav" controls autoplay> Your browser does not support the <audio> element. </audio> 不过对于有些浏览器来说,不支持有些格式的音频文件,我们可以通过如下的方式定义多种音频

Tags: