html5:
<div id="left1">
<div class="inner"></div>
</div>
<div id="main1">
<div class="inner"><img src="images/diyige.jpg" style="width:100%;height:100%" /></div>
</div>
<div id="right1">
<div class="inner"></div>
</div>
css:
#main1{
width:1000px;
float:left;
}
#left1,#right1{
float:left;
margin:0 0 0 -501px;
width:50%;
}
#left1 .inner,
#right1 .inner{
margin:0 0 0 501px;
background:green;
}
借助于负的margin来实现的,首先我们在中间列定好固定值,因为此值是不会在改变的,接着对其进行左浮动;那么关键地主是在左右边栏设置地方,这种方法是将其都进行50%的宽度设置,并加上中负的左边距,此负的左边距最理想的值是中间栏宽度的一半加上1px,比如说此例中是"1000px/2+1"也就是说他们都有一个"margin-left: -501px",这样一来,左右边栏内容无法正常显示,那是因为对他们进行了负的左边距操作,现在只需要在左右边栏的内层div.inner将其拉回来
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> html,body{width:100%;height:100%} *{margin:0px;padding:0px;border:0px} body{TEXT-ALIGN:center;background:#666;color:#333;font-size:12px;line-height:normal;font-family:"宋体";font-weight:normal} .textl{text-align:left} .textr{text-align:right} .dh_l{width:60%;left:0px;background:#FFCCFF;z-index:1} .dh_m{width:100%;left:0px;right:0px;z-index:1;} .dh_r{width:40%;right:0px;background:#CCCCFF;z-index:0;} .dh_l,.dh_m,.dh_r{position:absolute;top:0px;height:200px} .dh{width:778px;background:#CCC;border:1px solid #333;height:200px;margin:0 auto;} .zw1{margin:200px auto 0 auto} .zw2{margin:2px auto} .zw1,.zw2{width:778px;height:200px;clear:both;background:#FFF} </style> </head> <body> <!--导航s--> <div> <ul class="dh_l textl"> 左边陪衬条 </ul> <ul class="dh_m" style="top:-1px;"> <ul class="dh"> 导航广告部分 </ul> </ul> <ul class="dh_r textr"> 右边陪衬条 </ul> </div> <!--导航e--> <div class="zw1"> 网页正文1 网页正文1 网页正文1 </div> <div class="zw2"> 网页正文2 网页正文2 网页正文2 </div> <div class="zw2"> 网页正文3 网页正文3 网页正文3 </div> </body> </html>