CSS布局基礎：兩列 or 三列自適應

melody_lql 發布于2019-08-01 16:38 / 2732人閱讀

【第一列或某兩列固定寬度，最后一列占據頁面剩余寬度（即寬度自適應）】

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

基礎知識：元素float之后的變化

1.原本為inline或原本為block的元素，設置了float: left 或 float: right之后，會變得具有inline-block元素的特性，即：不獨占一行，且可以設置寬和高。
2.與position:absolute;的脫離文檔流不同的是：float的幾個元素，它們在同一個文檔流中。
3.float半脫離文檔流：兩個元素中的前一個設置了float:left;，對于后續元素的元素來說，前一個元素是脫離文檔流的，也就是會占據元素的位置；對于后續元素的內容來說，前一個元素又是占據文檔流的，也就是不會覆蓋前一個元素的內容。如圖所示：

方法一： 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;
}

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

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

這不是我們想要的結果，所以我們要自己設置右側元素的寬度：

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

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

方法三：及其方便的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

云服務器 GPU云服務器右列自適應 extjs三列式布局 css自適應 css圖片自適應

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50644.html

CSS布局基礎：兩列 or 三列自適應

【第一列或某兩列固定寬度，最后一列占據頁面剩余寬度（即寬度自適應）】寫這篇文章主要是為了解決一個實際遇到的問題：左右兩列布局，左側寬度固定，右側寬度自適應（或左中右三列布局，左側和中間寬度固定，右側寬度自適應），當頁面寬度變化時，怎樣使右側元素中的內容始終在頁面剩余寬度中居中顯示，將右側元素設置了text-align: center;之后，問題其實也就是怎樣讓右側元素的寬度占據頁面剩余所有寬度。...

hatlonely 2019-08-29 12:22 評論0 收藏0
css中的那些布局

摘要：張鑫旭老師的博客是左邊流式布局，右邊固定寬度左浮動因為浮動會導致元素脫離文檔流，所以下面的元素會占據浮動元素原來的位置。代碼左浮動實現兩列布局絕對定位實現兩列布局這個原理類似浮動，因為絕對定位會脫離文檔流，只需要設置右的就能實現布局。因為最近心血來潮，就總結了一下css中的幾種常見的多列布局。兩列自適應布局兩列自適應布局算是css布局里面最基礎的一種布局了，不少網站在使用。這...

liangzai_cool 2019-08-29 11:00 評論0 收藏0
css中的那些布局

摘要：張鑫旭老師的博客是左邊流式布局，右邊固定寬度左浮動因為浮動會導致元素脫離文檔流，所以下面的元素會占據浮動元素原來的位置。代碼左浮動實現兩列布局絕對定位實現兩列布局這個原理類似浮動，因為絕對定位會脫離文檔流，只需要設置右的就能實現布局。因為最近心血來潮，就總結了一下css中的幾種常見的多列布局。兩列自適應布局兩列自適應布局算是css布局里面最基礎的一種布局了，不少網站在使用。這...

phodal 2019-08-01 15:30 評論0 收藏0
html 三列布局（兩列自適應，一列固定寬度）

摘要：不做過多解釋主要是記錄一個完整的布局樣式，實現頁面大致三列其中左右兩列是自適應寬度，中間固定寬度效果。不做過多解釋：主要是記錄一個完整的布局樣式，實現頁面大致三列其中左右兩列是自適應寬度，中間固定寬度效果。不多少代碼奉上： CSS樣式代碼： /******************** *公共標簽樣式 ********************/ /********************...

ranwu 2019-04-23 13:29 評論0 收藏0
幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實現三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎上進一步優化，解決了圣杯布局錯亂問題，實現了內容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

FuisonDesign 2019-08-23 12:57 評論0 收藏0