常見面試題之左邊固定，右邊自適應佈局(四種方法：負邊距、flex)

yyh1945發表於2017-07-30
面試題Flex

這個佈局是最簡單的佈局之一，但是網路上大多是copy，而沒有認真解釋以及用新的特性實現。下面就做一個新的概括.

要求： 左邊固定100px, 右邊自適應

左position:absolute, 右margin-left 入門寫法

<div class="parent">
  <div class="l-child">左邊固定1  左邊固定2 左邊固定3</div>
  <div class="r-child">右邊自適應1 右邊自適應2 右邊自適應3</div>
</div>
//父元素相對定位，作為子元素絕對定位的參考
.parent{display:relative; background:#ddd }
.l-child{position:absolute; width:100px;background:#bbb }
.r-child{margin-left:100px;background:#999 }

demo展示

左邊float，觸發父元素寬度計算 入門寫法

html結構同上

.parent{background:#ddd;overflow:hidden; }
.l-child{float:left;width:100px;background:#bbb;z-index:10000; }
.r-child{margin-left:100px;background:#999;}

demo展示

左右float，右邊使用負邊距 奇伎淫巧

這個技能要這樣get：

  1. 父元素清除浮動

  2. A元素寬100%不變，margin-left:-100px後，外部的文件流認為以邊框為界，A減少了100px，而A是右浮動，也就是左邊開始有100px空白可填充的文件流空間；

  3. 子元素A1是認為父元素大小沒有變化，margin-left:100px後，正好等於父元素在外部空出來的文件流空間。

  4. B元素左浮動，且是後面的dom節點，正好佔據並且覆蓋A空出來的空間

<div class="parent">
  <div class="r-box">
    <div class="r-content">
      右邊自適應1 右邊自適應2 右邊自適應3
    </div>
  </div>
  <div class="l-box">
    左邊固定1  左邊固定2 左邊固定3
  </div>
</div>
.parent{background:#ddd;overflow:hidden; }
.l-box{float:left;width:100px;background:#bbb;}
.r-box{float:right;width:100%;margin-left:-100px;background:#999;}
.r-content{margin-left:100px;}

demo展示

flex佈局 高大尚

父元素flex佈局後，子元素預設就是彈性佈局，除非你確定子元素的彈性方式
ps：這個方法完美之處還在於，垂直方向也自動填充，輕鬆實現了等高佈局！！
html同第一個demo

.parent{display:flex; background:#ddd }
.l-child{flex:0 0 100px; background:#bbb }
.r-child{background:#999}

demo展示

相關文章