CSS3中流式布局的使用（等比缩放布局，使用百分比设定宽度）

时间：2016-01-04 编辑：简简单单来源：一聚教程网

1，等比缩放布局

创建等比缩放布局就是将网页分成几栏，然后用比例而非像素设定它们的宽度。以下面两栏布局为例：

    111com.net

left

right

2，外边距的宽度设置

使用流式布局时，除了栏宽要使用百分比设置，外边距也必须使用百分比（不能使用固定像素值），确保栏宽+外边距=100%。

下面在左侧、右侧以及栏目间各添加2%的外边距：

.leftColumn {
    width: 31.3%;
    margin-left: 2%;
    margin-right: 2%;
    float: left;
    background-color:yellow;

}

.rightColumn {
    width: 62.7%;
    margin-right: 2%;
    float: left;
    background-color:#7FFF9B;

}

3，边框的设置

由于边框是添加在元素的外围，而且边框宽度不接受百分比值，直接在栏上设置固定宽度的边框会破坏流式布局。

解决办法是在等比缩放的栏里额外增加一个

元素，把边框设定到这个

元素上。

    111com.net

left

right

上一个： CSS3中清除外边距、内边距margin,padding使用方法
下一个： CSS3 流式图片的设置，避免图片撑开所在的容器（附样例）

推荐专题

最新下载

热门教程

CSS3中流式布局的使用（等比缩放布局，使用百分比设定宽度）

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程