DIV+CSS實現兩邊固定寬度,中間自適應寬度

來源:互聯網
上載者:User
<!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=utf-8" /><title>DIV+CSS實現兩邊固定寬度,中間自適應寬度-天魅設計部落格</title><style>body{ margin:0; padding:10px;}#head{ margin-bottom:10px; height:50px; background-color:#999999}#main{}#left{ width:200px; float:left;margin-right:-200px; background-color:#FF9900}#mid{ width:auto;background:#00FF00;margin:0 220px;border:1px solid #000;}#right{ width:200px;margin-left:-200px; float:right; background-color:#CCCC00}#foot{ margin-top:10px; clear:both; height:50px; background-color:#CCCCCC}</style></head><body><div id="head">我是頭部</div><div id="main"> <div id="left">我是左邊,寬:200px</div> <div id="right">我是右邊,寬:200px</div> <div id="mid">我是中間,寬自適應</div> </div><div id="foot">我是底部</div></body></html>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.