1. 左右固定，中间变化
CSS代码：
<style type="text/css"> .left{ position: relative; width: 230px; float: left; margin: 0 -230px 0 0; } .left p, .right p{ background-color: red; } .midd{ float: left; width: 100%; } .midd .mic{ margin: 0 200px 0 240px; } p{ height: 150px; padding: 10px; color: #fff; background-color: #666; } .right{ position: relative; float: right; width: 190px; margin: 0 0 0 -190px; } </style>
HTML代码
<div class="left"> <p>左侧固定部分</p> </div> <div class="midd"> <div class="mic"> <p>中间自由扩展部分<p> </div> </div> <div class="right"> <p>右侧固定部分</p> </div>
同理可以得出右侧自适应：
<!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" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title>右侧自适应</title> <style type="text/css"> .left{ position: relative; width: 230px; float: left; margin-right: 10px; } .midd{ position: relative; width: 190px; float: left; margin-right: 10px; } .left p, .midd p{ background-color: red; } .right{ float: left; width: 100%; margin-left: -440px; } .rightc{ margin-left: 440px; } p{ height: 150px; padding: 10px; color: #fff; background-color: #666; } </style> </head> <body> <div class="left"> <p>左侧自适应</p> </div> <div class="midd"> <p>中间定宽</p> </div> <div class="right"> <div class="rightc"> <p>右侧定宽</p> </div> <div> </body> </html>