本文简单展示实现网页三栏布局的3种方式。
一、第一种:代码稍长,但是比较实用,页面主体先显示出来,也就是网速慢时,网页的主体内容先呈现给浏览者。
结构如下:
<div class="wrap">
<!-- main -->
<div class="main">
<div class="context">
<div class="inner">
<h1>这是主体部分</h1>
</div>
</div>
</div>
<!-- subMain -->
<div class="subMain">
<div class="inner"><h2>这是左边栏部分</h2></div>
</div>
<!-- sider -->
<div class="sider">
<div class="inner"><h3>这是右边栏部分</h3></div>
</div>
</div>
样式:
*{margin: 0;padding: 0;}
.wrap{width: 95%;margin: 0 auto;}
.main {
width: 100%;
float: left;
}
.context {
background-color: #000;
width: auto;
margin: 0 25%;
overflow: hidden; /* clear float */
_zoom: 1; /* clear float for IE 6 */
}
.subMain, .sider {
background-color: maroon;
width: 25%;
float: left;
}
.subMain {
margin-left: -100%;
_margin-left: -95%; /* IE 6 计算百分比方式与FF不同 */
}
.sider {
margin-left: -25%;
}
.inner {background-color: #555;color: #FFF;margin: 1em;}
请单击查看Demo
二、第二种:比较容易实现,也比较直观,左边的左浮动,右边的有浮动,主体无浮动。缺点是ie6会出现3px bug,这要求栏目宽度固定,所以不太灵活。
结构:
<div class="wrap">
<!-- subMain -->
<div class="subMain">
<div class="inner"><h1>这是左边栏部分</h1></div>
</div>
<!-- sider -->
<div class="sider">
<div class="inner"><h2>这是右边栏部分</h2></div>
</div>
<!-- main -->
<div class="main">
<div class="inner"><h3>这是主体部分</h3></div>
</div>
</div>
样式:
.subMain, .sider {
background-color: maroon;
width: 25%;
}
.subMain {
float: left;
}
.sider {
float: right;
}
.main {
background-color: #000;
margin: 0 25%;
overflow: hidden;
_zoom: 1;
/* IE 6 下存在3px bug,可以使用左右外边距为原本值+3px的形式,即_margin:0 npx+3px; */
}
请单击查看Demo
三、第三种:定位布局,同样比较直观,三栏的显示顺序完全按照文档流的顺序。
结构:
<div class="wrap">
<!-- subMain -->
<div class="subMain">
<div class="inner"><h1>这是左边栏部分</h1></div>
</div>
<!-- main -->
<div class="main">
<div class="inner"><h2>这是主体部分</h2></div>
</div>
<!-- sider -->
<div class="sider">
<div class="inner"><h3>这是右边栏部分</h3></div>
</div>
</div>
样式:
.subMain, .sider {
background-color: maroon;
width: 25%;
position: absolute;
top: 0;
}
.subMain {
left: 0;
}
.sider {
right: 0;
}
.main {
background-color: #000;
margin: 0 25%;
overflow: hidden;
_zoom: 1;
}
请单击查看Demo
注:等高的方法在此不做展示,很常用的方法就是边距法(padding-bottom = -margin-bottom = value ,value为一个比较大的值)。