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.布局只适用于浏览器的默认字号,如果设置字号变大,会导致短行,不易阅读