欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

左邊固定，右邊自適應(yīng)及左邊自適應(yīng)，右邊固定布局的幾種方法

CSS
老白8年前2731瀏覽0評論

前些天發(fā)布過一篇《CSS：左側(cè)欄固定寬度，右側(cè)欄自適應(yīng)寬度》的文章，今天再繼續(xù)分享下更全更簡單的方法！

頁面布局如下：
左邊固定，右邊自適應(yīng)及左邊自適應(yīng)，右邊固定布局的幾種方法.png

一、左邊固定，右邊自適應(yīng)的布局

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;}

效果圖如下：
左邊固定，右邊自適應(yīng)及左邊自適應(yīng)，右邊固定布局的幾種方法1.png
二、右邊固定，左邊自適應(yīng)的布局

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;}

效果圖如下：

左邊固定，右邊自適應(yīng)及左邊自適應(yīng)，右邊固定布局的幾種方法2.png
上面的方法在各瀏覽器的測試中，都能兼容！