本篇文章由:http://xinpure.com/css3-box-model-to-implement-a-three-column-layout/

使用 Position 绝对定位也是可以实现三栏布局的,然而使用 CSS3 的盒模型却显得更简单、更灵活

CSS3盒模型

display: -webkit-box;
display: -moz-box;
display: box;

将父元素定义成盒模型之后,就可以通过 box-flex 属性来实现布局了。

box-flex 主要让子元素针对父元素的宽度按一定比例进行划分

例如:

#pDiv {
display: -webkit-box;
display: -moz-box;
display: box;
width: 600px;
height: 300px;
} #subDiv1 {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
background-color: #000;
} #subDiv2 {
-webkit-box-flex: 4;
-moz-box-flex: 4;
box-flex: 4;
background-color: #ccc;
} #subDiv3 {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
background-color: #eee;
}

父元素 #pDiv 的宽度为 600px,那么 #subDiv1#subDiv3 的宽度就是 100px,而 #subDiv2 的宽度就是 400px

其实就是将父元素 #pDiv 平均分成了 6分,#subDiv1#subDiv3 占了1份,#subDiv2 占了4份

完全可以按自己的想法来定比例,所以使用这个属性就可以轻轻松松的实现三栏布局了。

固定子元素的宽度,盒模型是如何处理的?

当固定了其中1个或者多个子元素的宽度时,盒模型会将剩下的部分平分

比如将子元素做如下修改:

#subDiv1 {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
background-color: #000;
} #subDiv2 {
width: 200px;
background-color: #ccc;
} #subDiv3 {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
background-color: #eee;
}

子元素 #subDiv2 固定宽度为 200px,其它子元素就会从剩下的宽度 400px (父元素的宽度减去固定的宽度: 600px - 200px) 中按比例分配

因此,#subDiv1#subDiv3 均为 200px

遇到的问题

在子元素内容为空时,box-flex 分配的宽度都是正确的,但是给子元素添加了内容之后,子元素的宽度就被撑开了。

问题示例一 (子元素未添加内容)

问题示例二 (子元素添加内容)

有一种解决方案就是在子元素里定义 width: 0;

如:

#subDiv1 {
width: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
background-color: #000;
}

这样就可以解决添加内容之后,元素宽度被撑大的问题,不过此方法仅适用于 webkit 浏览器

CSS3使用盒模型实现三栏布局的更多相关文章

  1. CSS3弹性盒模型之Flexbox是布局模块box-sizing & box-orient & box-direction & box-ordinal-group

    css3 box-sizing属性 box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box. content-box,bord ...

  2. CSS3弹性盒模型布局模块介绍

    来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...

  3. CSS3弹性盒模型flexbox布局基础版

    原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

  4. CSS3弹性盒模型,Flex布局教程

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...

  5. CSS3弹性盒模型布局模块

    原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-introduction-and-d ...

  6. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  7. CSS3.0盒模型display:box;的使用

    CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...

  8. 布局:高度已知,布局一个三栏布局,左栏和右栏宽度为200px,中间自适应

    需求:高度已知为200px,写出三栏布局,左栏和右栏各位200px,中间自适应,如下图所示: 方法一:float浮动布局 原理是:定义三个区块,需要注意的是中间的区块放在右边区块的下面,统一设置高度为 ...

  9. CSS3 完善盒模型

    CSS3 改善了传统盒模型结构,增强了盒子构成要素的功能,扩展了盒模型显示的方式. 改善结构:为盒子新增轮廓区: 增强功能:内容区增强 CSS 自动添加内容功能,增强内容移除.换行处理:允许多重定义背 ...

随机推荐

  1. [BZOJ3214][ZJOI2013]丽洁体(Hash+DP)

    3214: [Zjoi2013]丽洁体 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 906  Solved: 335[Submit][Status] ...

  2. 【树形dp】Godfather

    [POJ3107]Godfather Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 7212   Accepted: 253 ...

  3. 【状压dp】Most Powerful

    [ZOJ3471]Most Powerful Time Limit: 2 Seconds      Memory Limit: 65536 KB Recently, researchers on Ma ...

  4. [典型漏洞分享]YS忘记密码机制设计存在缺陷,导致任意用户口令均可被修改【高】

    记录了安全测试过程中发现的一些典型的安全问题 YS忘记密码机制存在缺陷,可导致任意用户口令被修改[高] 问题描述: YS网站提供用户密码修改功能,当用户忘记密码时可通过该功能找回密码,但该修改密码的流 ...

  5. 解决URL中包含“%2F”导致Apache地址重写mod_rewrite失效的问题

    在使用Apache地址重写mod_rewrite期间,发现,当URL和PATH_INFO中出现%2f(/)或者%5c(\), 会被认为这是个不合法的请求, Apache将会直接返回"404 ...

  6. Dreamweaver 支持Jquery智能提示

    a.下载扩展插件:jQuery_API.mxp b.选择菜单栏:命令->扩展管理,选择刚下载的文件安装 c.重启DW 可以看到

  7. ISP图像调试工程师——对比度增强(熟悉图像预处理和后处理技术)

    经典对比度增强算法: http://blog.csdn.net/ebowtang/article/details/38236441

  8. 百度编辑器同一id重复调用不能生效的办法

    在使用js 调用表单组件模板的时候,表单内有一个编辑框 第一次调出的时候,百度编辑器正常显示,关闭后,再打开,百度编辑器不能显示 原因:第一次使用的时候, UE.getEditor('node_con ...

  9. 批量修改mp3文件的title等

    批量修改mp3文件的title等 不是改文件名哦: 下载地址:https://mp3tag.en.softonic.com/ 帮助文档:file:///C:/Program%20Files%20(x8 ...

  10. JVM基础(1)——内存模型

    转载:http://blog.csdn.net/weitry/article/details/53264262 系列文章规划: JVM基础(1)——内存模型 JVM基础(2)——内存管理 JVM基础( ...