pc端常见布局(-)

1.固定宽度三列布局

见新浪微博首页

 

　　html结构如下

<div class="wrapper">
/**最外层容器元素**/
    <div class="primary">
/**右侧主要内容区域**/
        <div class="primary">
             /**主要内容区域的主要内容**/
        </div>
       <div class="second">
          /**主要内容区域中的次要内容**/
       </div>
    </div>
    <div class="second">
/**左侧导航区**/
   </div>
</div>

　　css布局如下

/**为了让容器元素水平居中，因ie6混杂模式下不识别margin：0 auto声明，
 而text-align:center,ie会理解为让所有的东西居中，而不只是文本，此hack无害**/
body{text-align:center;}
.wrapper{width:920px;
            margin:0 auto; /**固定宽度的块级元素水平居中**/
            overflow:hidden; /**此技巧用来应对子元素浮动，这样不会因为子元素浮动导致父元素没有了高度**/    
             text-align:left; /**让文本重新左对齐**/
}
.wrapper .primary{
    width: 670px;
    /**padding-right:20px;**/
    float:right;
    display:inline;  /**防止ie双外边距浮动产生的bug**/
    overflow:hidden;
}
.wrapper .second{
    width:230px;
    float:left;
    dispaly:inline; /**防止ie双外边距浮动产生的bug**/
}
.wrapper .primary .primary{
    width:400px;
    float:left;
    display:inline;
}
.wrapper .primary .second{
    width:230px;
    padding-right:20px;
    float:right;
    display:inline;
}
    

　固定宽度布局优缺点

有点：根据设计稿的固定宽度来布局，可以清楚知道每一个元素的宽度，知道所有东西在什么地方，这种布局最直接最简单。

缺点：1.不能合理利用浏览器空间，遇到大的分辨率机器，页面只会集中在中间，两边留下很多空白；遇到小分辨率的机器，会出现滚动条　

        2.布局只适用于浏览器的默认字号，如果设置字号变大，会导致短行，不易阅读