DIV+CSs 两边固定宽度-中间自适应宽度

<!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>
    <title>排版</title>
    <style type="text/css">
 
        body{text-align:center; margin:0px;;}
        #contianer{background-color:#FFFFCC;}
        #header{width:100%; height:50px; background-color:#66FF99;}
      
        #content{width:100%; height:100px; background-color:#66FFFF;}
        #content_left{width:73px; height:100px; vertical-align:middle; margin-right:-100px; float:left; background-color:#FFFF99;}
        #content_right{width:73px; height:100px; vertical-align:middle; margin-left:-100px; float:right; background-color:#FFFF99;}
        #content_middle{width:auto; height:100px; margin:0 100px; background-color:#0057B9;text-align:center;}
      
        #footer{width:100%; height:65px; background-color:#FFCCFF;}
  
    </style>
</head>
<body>
<div id="contianer">
    <div id="header">  头  </div>
  
    <div id="content">
       <div id="content_left">   左   </div>
      
        <div id="content_right">   右   </div>
      
        <div id="content_middle">   中   </div>
    </div>
  
    <div id="footer">   脚  </div>
</div>
</body>
</html>

你可能感兴趣的:(div+css)