<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>左右布局（左侧定宽，右侧自适应宽）</title> <style type="text/css"> body{font:12px arial;color:#000;background:#fff;margin:0} #header{height:50px;color:#fff;background:#666;line-height:50px;margin-bottom:10px} #content{width:100%;color:#fff;float:right;margin-left:-240px} #content_inner{height:400px;background:#666;margin-left:240px} #side{width:230px;height:400px;color:#fff;background:#666;float:left} #footer{height:50px;color:#fff;background:#666;margin-top:10px} .clear{clear:both} </style> </head> <body> <div id="header">顶部</div> <div id="side">左侧</div> <div id="content"> <div id="content_inner">右侧</div> </div> <div class="clear"></div> <div id="footer">底部</div> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 左右布局（左侧定宽，右侧自适应宽） 喜欢 (0)or分享 (0)
