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

【www.bbyears.com--css3教程】

1，等比缩放布局

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

   
   
   
   


   
        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，边框的设置

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

解决办法是在等比缩放的栏里额外增加一个元素，把边框设定到这个元素上。

   
   
   
   


   
       
            left
              
   
   
       
            right
                  
   

本文来源：http://www.bbyears.com/css/91238.html