1.左侧固定宽度，高度自适应右侧
效果图
·html+css
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>左侧固定宽，自适应右侧高度</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>
你看代码，左侧确实没有定高，右侧也没有定宽。
2.左侧宽度高度固定，右侧自适应宽高
效果图
·html+css
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>左侧宽度高度固定，右侧自适应宽高</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>
你看代码，左侧确实定了宽高，右侧宽高都没有定。
3.左侧、右侧固定宽，中间自适应
效果图
·html+css
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>左侧、右侧固定宽，中间自适应</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>
你看代码，左侧、右侧都固定了宽度，中间宽度自适应了。关键点是：float:left配合margin-left使用。同时center的div写在了左右的前面，更加符合语义化。
网友评论