css中间固定宽度，两边自适应宽度

最新推荐文章于 2024-03-27 16:54:49 发布

凉川望远

最新推荐文章于 2024-03-27 16:54:49 发布

阅读量378

点赞数

本文链接：https://blog.csdn.net/qq_24193261/article/details/52125846

版权

html5:

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>