一、左右固定,中间自适应
HTML:
<div class="main"> <div class="main_body">Main</div> </div> <div class="left">Left</div> <div class="right">Right</div>CSS:
body{ margin:0; padding:0; min-width:600px; } .main{ float:left; width:100%; } .main_body{ margin:0 210px; background:#888; height:200px; } .left,.right{ float:left; width:200px; height:200px; background:#F60; } .left{ margin-left:-100%; } .right{ margin-left:-200px; }二、负边距+定为水平居中html
<div id="test"></div>css:
body{margin:0;padding:0;} #test{ width:200px; height:200px; background:#F60; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px; } 三、多列等高
<div id="wrap"> <div id="left"> <p style="height:50px">style="height:50px"</p> </div> <div id="center"> <p style="height:100px">style="height:100px"</p> </div> <div id="right"> <p style="height:200px">style="height:200px"</p> </div> </div>CSS:
body,p{ margin:0; padding:0; } #wrap{ overflow:hidden; width:580px; margin:0 auto; } #left,#center,#right{ margin-bottom:-200px; padding-bottom:200px; } #left { float:left; width:140px; background:#777; } #center { float:left; width:300px; background:#888; } #right { float:right; width:140px; background:#999; } p {color:#FFF;text-align:center}
时间: 2024-10-23 17:22:20