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

流式布局在现在的手机或网页中使用到的非常的多了，今天我们就一起来看一篇CSS3中流式布局的使用(等比缩放布局，使用百分比设定宽度)的例子，具体的操作细节如下所示。

1，等比缩放布局

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

111cn.net

* {

margin: 0px;

padding: 0px;

}

.leftColumn {

width: 33.3%;

float: left;

background-color:yellow;

height:300px;

}

.rightColumn {

width: 66.7%;

float: left;

background-color:#7FFF9B;

height:300px;

}

left

right

2，外边距的宽度设置

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

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

.leftColumn {

width: 31.3%;

margin-left: 2%;

margin-right: 2%;

float: left;

background-color:yellow;

height:300px;

}

.rightColumn {

width: 62.7%;

margin-right: 2%;

float: left;

background-color:#7FFF9B;

height:300px;

}

3，边框的设置

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

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

元素，把边框设定到这个

元素上。

111cn.net

* {

margin: 0px;

padding: 0px;

}

body{

background-color:#EFEFEF;

}

.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;

}

.colomnContent {

border: 1px solid gray;

height:130px;

}

left

right