.html pos rate amp image target pan 測試 tar

一、左邊固定，右邊自適應的布局 1. 左邊左浮動，右邊加個overflow:hidden; #lt{ float: left;width:200px; background: #ff0;} #rt{ overflow: hidden; background: #f0f;} 2. 左邊左浮動，右邊加個margin-left; #lt{ float: left; width:200px; background: #ff0;} #rt{ margin-left: 200px; background: #f0f;} 3. 左邊絕對定位，右邊加個margin-left; #lt{ position: absolute; top:0; left:0; width:200px; background: #ff0;} #rt{ margin-left: 200px; background: #f0f;} 4. 左右兩邊絕對定位，右邊加個width,top,left,right #lt{ position: absolute; top:0 ; left:0 ;width:200px; background: #ff0;} #rt{ position: absolute; top:0 ; left:200px; width: 100% ; rigth:0;background: #f0f;} 效果圖如下：

二、右邊固定，左邊自適應的布局 1. 左邊左浮動，margin-left負值,右邊右浮動; #lt{float:left; width:100%;background: #00f;margin-right: -200px;} #rt{float: right; width: 200px;background: #ff0;} 2. 右邊絕對定位，左邊margin-right; #lt{margin-right:200px; background: #00f;} #rt{ position: absolute; right:0; top:0; width: 200px;background: #ff0;} 3. 左右兩邊絕對定位，左邊加個width,top,left,right #lt{ position: absolute; top:0; left:0; rigth:0; width: 100% ; background: #f0f;} #rt{ position: absolute; top:0; left:200px; width:200px; background: #ff0;} 效果圖如下：

上面的方法在各瀏覽器的測試中，都能兼容！

常見非固寬度布局