1.左側(cè)固定寬度话侄，高度自適應右側(cè)
效果圖
·html+css
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>左側(cè)固定寬睹栖，自適應右側(cè)高度</title><style> .main{ position: relative; color: #fff; } .left{ position: absolute; top: 0; left: 0; bottom: 0; width: 300px; background: #f00; } .right{ height: 200px; margin-left: 300px; background: #000; }</style></head><body><div class="main"> <div class="left">left</div> <div class="right">right</div></div></body></html>
你看代碼，左側(cè)確實沒有定高蛇受，右側(cè)也沒有定寬。
2.左側(cè)寬度高度固定厕鹃，右側(cè)自適應寬高
效果圖
·html+css
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>左側(cè)寬度高度固定兢仰，右側(cè)自適應寬高</title> <style> .main{ overflow: hidden; color: #fff; } .left{ float: left; width: 300px; height: 200px; background: #f00; } .right{ margin-left: -300px; padding-bottom: 9999px; margin-bottom: -9999px; background: #000; } </style></head><body> <div class="main"> <div class="left">left</div> <div class="right">right</div> </div></body></html>
你看代碼，左側(cè)確實定了寬高剂碴，右側(cè)寬高都沒有定把将。
3.左側(cè)、右側(cè)固定寬汗茄，中間自適應
效果圖
·html+css
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>左側(cè)秸弛、右側(cè)固定寬，中間自適應</title> <style> .fl{ float: left; } .main{ color: #fff; } .center{ background: #9A0069; width: 100%; height: 300px; } .center .content{ padding: 0 100px; } .left{ width: 100px; height: 300px; margin-left: -100%; background: #009A61; } .right{ width: 200px; height: 300px; background: #00529A; margin-left: -200px; } </style></head><body> <div class="main"> <div class="center fl"> <div class="content"> center </div> </div> <div class="left fl">left</div> <div class="right fl">right</div> </div></body></html>
你看代碼洪碳，左側(cè)递览、右側(cè)都固定了寬度，中間寬度自適應了瞳腌。關鍵點是：float:left配合margin-left使用绞铃。同時center的div寫在了左右的前面，更加符合語義化嫂侍。
