css經典佈局系列二——等分等高佈局

木頭房子發表於2019-04-20
CSS

一列定寬，一列自適應

  • 要求兩列，左邊一列固定寬度，右邊一列根據瀏覽器自適應；
<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>
複製程式碼

float + margin

  • 左邊浮動，右邊設定margin-left等於左邊元素寬度

效果圖

<style>
  .left {
    float: left;
    width: 100px;
  }
  .right {
    margin-left: 100px
    /*間距可再加入 margin-left */
  }
</style>
複製程式碼

  • IE 6 中會有3畫素的 BUG，解決方法可以在 .left 加入 margin-left:-3px

    • 解決這個小bug的方案如下：
    <style>
  .left {
    float: left;
    width: 100px;
  }
  .right-fix {
    float: right;
    width: 100%;
    margin-left: -100px;
  }
  .right {
    margin-left: 100px
    /*間距可再加入 margin-left */
  }
</style>
複製程式碼
    • 此方法不會存在 IE 6 中3畫素的 BUG，但 .left 不可選擇， 需要設定 .left {position: relative} 來提高層級。
    • 注意此方法增加了不必要的 HTML 文字結構。
    • 傲嬌的程式設計師應該放棄太低版本的瀏覽器

float + overflow

  • 相當於right也開啟了bfc，就不會被left的浮動影響到。
<style>
  .left {
    float: left;
    width: 100px;
  }
  .right {
    overflow: hidden;
  }
</style>
複製程式碼
  • 設定 overflow: hidden 會觸發 BFC 模式（Block Formatting Context）塊級格式上下文。BFC是什麼呢。用通俗的來講就是，隨便你在BFC 裡面幹啥，外面都不會受到影響 。
    • 此方法樣式簡單但不支援 IE 6

table

  • table 的顯示特性為每列的單元格寬度和一定等於表格寬度。
  • table-layout: fixed 可加速渲染，也是設定佈局優先。
  • table-cell 中不可以設定 margin 但是可以通過 padding 來設定間距
<style>
  .parent {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .left {
    display: table-cell;
    width: 100px;
  }
  .right {
    display: table-cell;
    /*寬度為剩餘寬度*/
  }
</style>
複製程式碼

flex

  • 低版本瀏覽器相容問題效能問題，只適合小範圍佈局
<style>
  .parent {
    display: flex;
  }
  .left {
    width: 100px;
    margin-left: 20px;
  }
  .right {
    flex: 1;
  }
</style>
複製程式碼

我們在學會一列定寬，一列自適應的佈局後也可以方便的實現 多列定寬，一列自適應 多列不定寬加一列自適應。

等分佈局

  • 多列布局，每列根據瀏覽器寬度等比分配各自寬度；
<div class="parent">
  <div class="column">
    <p>1</p>
  </div>
  <div class="column">
    <p>2</p>
  </div>
  <div class="column">
    <p>3</p>
  </div>
  <div class="column">
    <p>4</p>
  </div>
</div>
複製程式碼

float+百分比

  • 此方法可以完美相容 IE8 以上版本
<style>
  .parent {
    margin-left: -20px;
  }
  .column {
    float: left;
    width: 25%;
    padding-left: 20px;
    // 將內邊距和border放到元素的內容寬高裡面
    box-sizing: border-box;
  }
</style>
複製程式碼

flex

  • 強大簡單，有相容問題
<style>
  .parent {
    display: flex;
  }
  .column {
    flex: 1;
  }
  .column+.column { /* 相鄰兄弟選擇器 */
    margin-left: 20px;
  }
</style>
複製程式碼

table

<style>
  .parent-fix {
    margin-left: -20px;
  }
  .parent {
    display: table;
    width: 100%;
    /*可以佈局優先，也可以單元格寬度平分在沒有設定的情況下*/
    table-layout: fixed;
  }
  .column {
    display: table-cell;
    padding-left: 20px;
  }
</style>
複製程式碼

等高佈局

  • 兩列為例子，左邊和右邊的列高度相等；
<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>
複製程式碼

table

  • table 的特性為每列等寬，每行等高可以用於解決此需求
<style>
  .parent {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .left {
    display: table-cell;
    width: 100px;
  }
  .right {
    display: table-cell
    /*寬度為剩餘寬度*/
  }
</style>
複製程式碼

flex

  • 設定flex佈局之後，在側軸上的排列方式預設為stretch，也就是未設定高度時，預設佔滿了整個容器的高；
<style>
  .parent {
    display: flex;
  }
  .left {
    width: 100px;
    margin-left: 20px;
  }
  .right {
    flex: 1;
  }
</style>
//注意這裡實際上使用了 align-items: stretch，flex 預設的 align-items 的值為 stretch
複製程式碼

float

  • 此方法為偽等高（只有背景顯示高度相等），左右真實的高度其實不相等，可用控制檯檢視。
  • 相容性較好。
<style>
  .parent {
    overflow: hidden;
  }
  .left,.right {
    padding-bottom: 9999px;
    margin-bottom: -9999px;
  }
  .left {
    float: left;
    width: 100px;
    margin-right: 20px;
  }
  .right {
    overflow: hidden;
  }
</style>
複製程式碼

多列的等高佈局

如圖所示

  • 要求：
    • 多列中內容不確定高度，但是要求多列無論內容所佔高度，每列都要是等高的；
    • 每一列的div 標籤中的內容所佔高度不同，而且沒有明確的給 div 一個高度，而且也不知道這個內容會佔多高；
    • 直接為所有 div 硬性的設定一個高度，是不行的，不靈活，不便後期維護；
.container {
    overflow: hidden;
}

div.item {
	// 相當於把每列的高度再加10000px
    padding-bottom: 10000px;
    // 又把每列div在文件流中所加的10000px減少了，這樣後面緊跟元素就會緊跟著上來。
	margin-bottom: -10000px;
}
複製程式碼

到此，我們瞭解常見的佈局解決方案，這些只是參考，一樣的佈局實現方式多種多樣。 主要就使用position、flex 、table（從很久很久以前起，我們就拋棄了table佈局頁面，但display: table;是異常強大）、float等屬性目前flex相容性較差 傲嬌的程式設計師應該放棄太低版本的瀏覽器。

相關文章