CSS3使用盒模型实现三栏布局

本篇文章由: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 浏览器

时间: 2024-11-06 09:51:29

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

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,border和padding不计算入width之内 padding-box,border-box,border和padding计算入width之内 ie8+浏览器支持content-box和border-box: ff则支持全部三个值. 使用时: -webkit-box-sizing: 100px; //

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

原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提出解决方案.另外本人2014年5月还废寝忘食的翻译了国外的<CSS3弹性盒模型flexbox完整教程>和<CSS3弹性盒模型flexbox布局实例>,这么好的文章没有人来发现,实在是遗憾. 文章写作背景 查询Can I use上的使用情况,发现最新的浏览器基本支持这个属性,IE10开始

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

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. 尽管目前css3在PC端上的兼容性还不是那么完美,但是在移动端已基本实现兼容. 网络上有很多关于flex布局很好的教程.总结的也很完美,我就直接收藏了,以备查询 详解css3弹性盒模型(Flexbox) 移动端开发小记 – Flexbox

CSS3弹性盒模型flexbox完整版教程

文章目录 基础知识 属性介绍 display: flex | inline-flex; (适用于父类容器元素上) 请注意: flex-direction (适用于父类容器的元素上) flex-wrap (适用于父类容器上) flex-flow (适用于父类容器上) justify-content (适用于父类容器上) align-items (适用于父类容器上) align-content (适用于父类容器上) order (适用于弹性盒模型容器子元素) flex-grow (适用于弹性盒模型容

css两栏三栏布局

一.三栏布局 1. 经典的圣杯布局(双飞翼布局) <style type="text/css"> *{margin: 0;padding: 0;} body{min-width: 700px;} .header, .footer{ border: 1px solid #333; background: #aaa; text-align: center; } .sub, .main, .extra{ float: left; min-height: 130px; } .sub

三栏布局中间自适应总结

三栏布局,中间自适应这个经典的问题,之前也看了很多.今天准备在自己的博客里面总结一下,加深自己的理解. 方式一:左边左浮动,右边右浮动,中间自适应 <style> .left{ float: left; height: 200px; width: 200px; background-color: aquamarine; border: solid 1px black; } .right{ float: right; height: 200px; width: 300px; background

记一道css面试题 : 三栏布局两边宽度固定,中间宽度自适应,并且布局随屏幕大小改变。

前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用一行.像这样 当屏幕大于600px时,是这样 我做出来用了css3的@media,如果不用这个,好吧,水平有限想不出来... 下面是代码: <!DOCTYPE> <html> <head> <style> body{ margin: 0 ; padding: 0

三栏布局和水平垂直居中demol例子

html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>清除浮动和布局</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <di

css3基础教程:CSS3弹性盒模型

今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. 注意:Flexbox布局是最合适的一个应用程序的组件,以及小规模的布局,而网格布局是用于较大规模的布局. 盒模型的兼容性不佳,在使用时,需要加上浏览器的私有前缀. 父元素display:box或者display:inline-box; display: -webkit-box;display: -m