兩列布局——左側寬度固定，右側寬度自適應的兩種方法

時間 2019-11-18

標籤佈局左側寬度固定右側自適應兩種方法欄目 CSS 简体版

原文原文鏈接

　　今天作了一個練習，要求用兩種方法來實現左側寬度固定、右側寬度自適應的兩列布局。一開始我覺得會很簡單，畢竟只是練習，可是我寫出了一種方法以後卻沒能順利的寫出第二種方法。對於網上的一些解決方法我仍是不太滿意，因而本身繼續琢磨着，問問一些前輩，但願獲得一些思路。終於，皇天不負有心人，在本身翻譯的一篇關於BFC的文章上，我找到了解決的方法。css

　　關於左側寬度固定，右側寬度自適應兩列布局的一種很經常使用的方法我相信你們都知道。就是利用左側元素浮動，或者絕對定位的方式使其脫離常規文檔流，讓兩個塊級元素可以在同一行顯示。而後右側元素 margin-left 的值等於左側元素寬度，這時右側元素將緊挨着左側元素，因爲塊元素的寬度會自動默認充滿剩下的屏幕，因此就實現了右側自適應的效果了。html

HTML代碼以下：瀏覽器

<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
    <div class="one"></div>
    <div class="two">第一種方法</div>
</body>
</html>

CSS代碼以下：佈局

.one {
    position: absolute;
    height: 100px;
    width: 300px;
    background-color: blue;
}
.two {
    height: 200px;
    margin-left: 300px;
    background-color: red;
}

瀏覽器上輸出效果：學習

　　第二種方法，我利用的是建立一個新的BFC（塊級格式化上下文）來防止文字環繞的原理來實現的。BFC就是一個相對獨立的佈局環境，它內部元素的佈局不受外面佈局的影響。它能夠經過如下任何一種方式來建立：flex

float的值不爲none
position的值不爲static或者relative
display的值爲 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一個
overflow的值不爲visible

　　關於BFC，在w3c裏是這樣描述的：在BFC中，每一個盒子的左外邊框緊挨着包含塊的左邊框（從右到左的格式化時，則爲右邊框緊挨）。即便在浮動裏也是這樣的（儘管一個包含塊的邊框會由於浮動而萎縮），除非這個包含塊的內部建立了一個新的BFC。這樣，當咱們給右側的元素單首創建一個BFC時，它將不會緊貼在包含塊的左邊框，而是緊貼在左元素的右邊框。spa

HTML代碼：翻譯

<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
    <div class="one"></div>
    <div class="two">第二種方法</div>
</body>
</html>

CSS代碼：code

.one {
    float: left;
    height: 100px;
    width: 300px;
    background-color: blue;
}
.two {
    overflow: auto;
    height: 200px;
    background-color: red;
}