CSS布局基礎(chǔ)：兩列 or 三列自適應(yīng)

melody_lql 發(fā)布于2019-08-01 16:38 / 2741人閱讀

【第一列或某兩列固定寬度，最后一列占據(jù)頁面剩余寬度（即寬度自適應(yīng)）】

寫這篇文章主要是為了解決一個(gè)實(shí)際遇到的問題：
左右兩列布局，左側(cè)寬度固定，右側(cè)寬度自適應(yīng)（或左中右三列布局，左側(cè)和中間寬度固定，右側(cè)寬度自適應(yīng)），當(dāng)頁面寬度變化時(shí)，怎樣使右側(cè)元素中的內(nèi)容始終在頁面剩余寬度中居中顯示，將右側(cè)元素設(shè)置了text-align: center;之后，問題其實(shí)也就是怎樣讓右側(cè)元素的寬度占據(jù)頁面剩余所有寬度。

基礎(chǔ)知識(shí)：元素float之后的變化

1.原本為inline或原本為block的元素，設(shè)置了float: left 或 float: right之后，會(huì)變得具有inline-block元素的特性，即：不獨(dú)占一行，且可以設(shè)置寬和高。
2.與position:absolute;的脫離文檔流不同的是：float的幾個(gè)元素，它們?cè)谕粋€(gè)文檔流中。
3.float半脫離文檔流：兩個(gè)元素中的前一個(gè)設(shè)置了float:left;，對(duì)于后續(xù)元素的元素來說，前一個(gè)元素是脫離文檔流的，也就是會(huì)占據(jù)元素的位置；對(duì)于后續(xù)元素的內(nèi)容來說，前一個(gè)元素又是占據(jù)文檔流的，也就是不會(huì)覆蓋前一個(gè)元素的內(nèi)容。如圖所示：

方法一： float + calc()

//html

    left
    我要居中
center

//css
.wrap {
  width: 500px;
  background: yellow;
  overflow: hidden;
}
.left {
  float:left;
  width: 100px;
  background: blue;
}
.right{
  float:left;
  background: red;
  text-align:center;
}

如果我們僅僅這樣寫，那么效果會(huì)像下圖這樣：

可以看到右側(cè)元素的寬度并不是頁面剩余寬度。原因是：右側(cè)元素float之后具有了行內(nèi)塊級(jí)元素的特性，即寬度為auto。所以無法占滿剩余寬度。

這不是我們想要的結(jié)果，所以我們要自己設(shè)置右側(cè)元素的寬度：

.right {
    width: calc(100% - 100px);
}

就符合我們的要求了：

方法二：position / float + margin-left

//html部分同上
//css
.wrap {
  position: relative;
  width: 500px;
  background: yellow;
}
.left {
  position:absolute;
  left: 0; /*或 float:left; */
  width: 100px;
  background: blue;
}
.right{
  margin-left: 100px;
  background: red;
  text-align:center;
}

原理是：左側(cè)元素float: left或者設(shè)置position: absolute 之后脫離了文檔流，右側(cè)其實(shí)依然是一個(gè)霸道的獨(dú)占一行的塊級(jí)元素（block），設(shè)置margin-left為左側(cè)元素寬度之后，看起來就像是兩個(gè)元素在同一行，且右側(cè)元素寬度自適應(yīng)啦：

方法三：及其方便的flex

.content {
  width: 500px;
  background: blue;
  display: flex;
}
.left {
  background: pink;
  width: 100px;
}
.right {
  background: yellow;
  text-align: center;
  flex: auto;
}

參考資料：
http://www.imooc.com/video/774/0