實現(xiàn)兩列布局的方法

html

<div class="main">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

1. float+margin-left

.main{
 border: 1px solid black;
  overflow: hidden;//清除浮動
}
.left{
  width: 200px;
  background: green;
  float: left;
  
}
.right{
  margin-left: 200px;
  background: red;
}

left設(shè)為float: left,脫離文檔流。right是塊級元素會"無視"浮動元素作谚,它的寬度隨著適應(yīng)父元素的寬度憎亚,此時margin-left為left元素的寬度兆蕉。

2. absolute+margin-left

.main{
 border: 1px solid black;
  
}
.left{
  width: 200px;
  background: green;
  position: absolute;
}
.right{
  margin-left: 200px;
  background: red;
}

另外一種讓兩個block排列到一起的方法是對左側(cè)盒子使用position: absolute的絕對定位吩愧。這樣,右側(cè)盒子也能無視掉它

3. 浮動和負邊距實現(xiàn)

html

<div class="main">
    <!--右邊盒子先渲染-->
    <div class="right">
        <div class="right-inner">right-inner</div>
    </div>
    <div class="left">left</div>
</div>

css

.main {
            border: 1px solid black;
        }

        .left {
            float: left;
            width: 200px;
            background: green;
            margin-left: -100%;
        }

        .right {
            float: left;
            width: 100%;
        }

        .right-inner {
            margin-left: 200px;
            background: yellow;
        }

可以不用指定左邊寬度(即不用計算)的方法有:

4. flex

.main{
 border: 1px solid black;
 display: flex;
}
.left{
  width: 100px;
  background: green;
}
.right{
  background: red;
  flex: 1;
}

只須將右邊盒子flex:1,意為寬度自動伸縮

5. float+BFC

.main{
 border: 1px solid black;
overflow: auto;
}
.left{
  float: left;
  background: green;
  margin-right: 20px;
}
.right{
  background: red;
  overflow: hidden;
}

由于觸發(fā)了BFC的元素不會與浮動元素重疊這條特性极阅,這種情況下溯警,只需要為左側(cè)的浮動盒子設(shè)置margin-right阵具,就可以實現(xiàn)兩個盒子的距離了。而右側(cè)盒子是block級別的,所以寬度能實現(xiàn)自適應(yīng)

鏈接

https://zhuqingguang.github.io/2017/08/16/adapting-two-layout/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末单绑,一起剝皮案震驚了整個濱河市别威,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖吁讨,帶你破解...
    沈念sama閱讀 222,464評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異峦朗,居然都是意外死亡建丧,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評論 3 399
  • 文/潘曉璐 我一進店門波势,熙熙樓的掌柜王于貴愁眉苦臉地迎上來翎朱,“玉大人,你說我怎么就攤上這事尺铣”蒸妫” “怎么了?”我有些...
    開封第一講書人閱讀 169,078評論 0 362
  • 文/不壞的土叔 我叫張陵迄埃,是天一觀的道長。 經(jīng)常有香客問我兑障,道長侄非,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,979評論 1 299
  • 正文 為了忘掉前任流译,我火速辦了婚禮逞怨,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘福澡。我一直安慰自己叠赦,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,001評論 6 398
  • 文/花漫 我一把揭開白布革砸。 她就那樣靜靜地躺著除秀,像睡著了一般。 火紅的嫁衣襯著肌膚如雪算利。 梳的紋絲不亂的頭發(fā)上册踩,一...
    開封第一講書人閱讀 52,584評論 1 312
  • 那天,我揣著相機與錄音效拭,去河邊找鬼暂吉。 笑死,一個胖子當(dāng)著我的面吹牛缎患,可吹牛的內(nèi)容都是我干的慕的。 我是一名探鬼主播,決...
    沈念sama閱讀 41,085評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼挤渔,長吁一口氣:“原來是場噩夢啊……” “哼肮街!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起蚂蕴,我...
    開封第一講書人閱讀 40,023評論 0 277
  • 序言:老撾萬榮一對情侶失蹤低散,失蹤者是張志新(化名)和其女友劉穎俯邓,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體熔号,經(jīng)...
    沈念sama閱讀 46,555評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡稽鞭,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,626評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了引镊。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片朦蕴。...
    茶點故事閱讀 40,769評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖弟头,靈堂內(nèi)的尸體忽然破棺而出吩抓,到底是詐尸還是另有隱情,我是刑警寧澤赴恨,帶...
    沈念sama閱讀 36,439評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站伦连,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏惑淳。R本人自食惡果不足惜额港,卻給世界環(huán)境...
    茶點故事閱讀 42,115評論 3 335
  • 文/蒙蒙 一歧焦、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧绢馍,春花似錦向瓷、人聲如沸舰涌。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽舵稠。三九已至超升,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間哺徊,已是汗流浹背室琢。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留落追,地道東北人盈滴。 一個月前我還...
    沈念sama閱讀 49,191評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親巢钓。 傳聞我的和親對象是個殘疾皇子病苗,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,781評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J的外補...
    _Yfling閱讀 13,761評論 1 92
  • 以下文章是我在網(wǎng)上收集的內(nèi)容症汹,為了記錄自己的學(xué)習(xí)以及為了以后不到處找而記錄下來硫朦,如果對你有用,請感謝寫這些文章的前...
    DCbryant閱讀 942評論 0 2
  • 雙飛翼布局和BFC 之前看到了一些面試題中背镇,面試官會問到如果實現(xiàn)雙飛翼布局或者是圣杯布局咬展,這兩個布局的理念基本是類...
    LucasDog閱讀 1,050評論 0 4
  • 新晉制片人佟蔓薇攜國產(chǎn)影片再沖海外電影節(jié)~繼電影《七十七天》在中美電影節(jié)斬獲殊榮之后,另一部由佟蔓薇擔(dān)任制片人...
    藝術(shù)資訊1閱讀 877評論 1 0
  • 選課瞒斩,備課破婆,做課件,終于要錄課了胸囱。 期間的思考琢磨修改祷舀,就不啰嗦了,一句話——40分鐘的一堂課烹笔,臺下400分鐘的準(zhǔn)...
    羽衣甘蘭閱讀 335評論 2 0