2

左右结构,左边100%;右边宽度固定

请输入图片描述

css

#header{height:80px; background:#CCC;}
#center{overflow:hidden; zoom:1;}
#main_wrapper{float:left; width:100%; margin-top:10px; margin-left:-210px;}
#main{height:200px; margin-left:210px; background:#999;}
#sidebar{float:right; width:200px; margin-top:10px; height:200px; background:#AAA;}
#footer{height:50px; margin-top:10px; background:#CCC;}

HTML

<body>
    <div id="header"></div>
    <div id="center">
       <div id="main_wrapper">
         <div id="main"></div>
       </div>
       <div id="sidebar"></div>
   </div>
   <div id="footer"></div>
</body>

左右结构,左边固定,右边100%

请输入图片描述

css

#header{height:80px; background:#CCC;}
#center{overflow:hidden; zoom:1;}
#sidebar{float:left; width:200px; margin-top:10px; height:200px;    background:#AAA;}
#main_wrapper{float:right; width:100%; margin-top:10px; margin-left:-210px;}
#main{height:200px; margin-left:210px; background:#999;}
#footer{height:50px; margin-top:10px; background:#CCC;}

html

<body>
   <div id="header"></div>
   <div id="center">
       <div id="sidebar"></div>
       <div id="main_wrapper">
          <div id="main"></div>
       </div>
  </div>
  <div id="footer"></div>
</body>

左中右结构,左边固定,右边固定,中间100%;

请输入图片描述

css

#header{height:80px; background:#CCC;}
#center{overflow:hidden; zoom:1;}
#sidebar-l {float:left; width:200px; margin-top:10px; height:200px; background:#AAA;}
#main-wrapper {margin-top:10px; float:left; width:100%; margin-left:-420px; height:200px;}
#main {margin-left:438px; background:#999; height:200px;}
#sidebar-r {float:right; width:200px; margin-top:10px; height:200px; background:#AAA;}
#footer{height:50px; margin-top:10px; background:#CCC;}

html

<body>
<div id="header"></div>
<div id="center">
    <div id="sidebar-l">这里是左边</div>
    <div id="main-wrapper">
        <div id="main">这里是中间</div>
    </div>
    <div id="sidebar-r">这里是右边</div>
</div>
<div id="footer"></div>
</body>

小渝人儿
1.1k 声望849 粉丝

前端工程师