css-左右布局

一、左邊固定,右邊自適應(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)的布局

1. 左邊左浮動,margin-left負(fù)值,右邊右浮動
   #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;}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,179評論 1 92
  • 各種純css圖標(biāo) CSS3可以實現(xiàn)很多漂亮的圖形,我收集了32種圖形,在下面列出。直接用CSS3畫出這些圖形,要比...
    劍殘閱讀 9,990評論 0 8
  • 1. 前言 前端圈有個“?!保涸诿嬖嚂r,問個css的position屬性能刷掉一半人,其中不乏工作四五年的同學(xué)。在...
    YjWorld閱讀 4,930評論 5 15
  • CSS布局解決方案(終結(jié)版) 前端布局非常重要的一環(huán)就是頁面框架的搭建,也是最基礎(chǔ)的一環(huán)。在頁面框架的搭建之中,又...
    殺個程序猿祭天閱讀 634評論 0 2
  • 前端布局非常重要的一環(huán)就是頁面框架的搭建,也是最基礎(chǔ)的一環(huán)。在頁面框架的搭建之中,又有居中布局、多列布局以及全局布...
    一個敲代碼的前端妹子閱讀 874評論 0 12

友情鏈接更多精彩內(nèi)容