pc常见布局（二）

上一篇说到固定宽度三列布局，为了避免其不能完好的适用于不同屏幕分辨率，今天采用流式布局，流式布局的尺寸是采用了百分比设置。同时加上以像素或em为单位的min-width和

max-width,以防止窗口过小和过大造成的宽度太窄和太宽。

例如：设计者使用的宽度为920像素，而大多数的使用者的浏览器设置为1250像素，那么最外层的宽度百分比为 920/1250=73.6%;

　　　主要内容宽度为 670/920 = 72.82% , 次要内容宽度为 230/920 = 25%, 这样中间留出了2.18%的隔离带

　　   主要内容中的主体部分宽度为 400/670 = 59.7%， 非主体部分宽度为 230/670 = 34.33%, 右侧内边距为 20/670 = 2.98%, 中间留有的隔离带为 2.99

css代码为

body{text-align:center;}
.wrapper{
    width: 73.6%;
    text-align:left;
    margin:0 auto;
    overflow:hidden;
　　 max-width:125em;
    min-width:62em;
  
}
.wrapper .primary{
    width:72.82%;
    float:right;
    display:inline;
    overflow:hidden;  
}
.wrapper .second{
    width:25%;
    float:left;
    display:inline;
}
.wrapper .primary{
    width:59.7%;
    float:left;
    display:inline;
}
.wrapper .second{
     width:34.33%;
     float:right;
     padding-right:2.98%
     display:inline;
}

如此便得到了一个最适合1250像素的一个流动式布局，其他分辨率下也是很漂亮的呈现。

流式布局已满足大多数网站布局要求，对于有字号可以随意改变的特殊要求，可以采用弹性布局来解决。下一篇将介绍下弹性布局注意事项