table-call佈局

原創

2020-02-20 18:55

學習了旭哥的文章總結

等分

  <style>
    .container {
      display: table;
      height: 300px;
      width: 100%;
      border: 1px solid red;
    }

    .child {
      display: table-cell;
      border: 1px solid red;
    }
  </style>

<body>
  <div class="container">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
  </div>
</body>

效果

等高佈局

  <style>
    .list_row {
      display: table-row;
    }

    .list_cell {
      display: table-cell;
      width: 30%;
      padding: 1.6%;
      background-color: #f5f5f5;
    }

    /*中間一個元素背景淡藍，有別於兩邊的淡灰色*/
    .list_center {
      background-color: #f0f3f9;
    }
  </style>

<body>
  <div class="list_row">
    <div class="list_cell">對於不支持display:table-cell屬性的IE6/7瀏覽器，又當如何解決呢？
      我們可以使用“補差等高法”，就是一個一個很大的margin-bottom負值配上一個同樣大小的padding-bottom值，本例中爲了實例需要，margin-bottom值就百來像素。顯然，由於兩者原理不同，難免需要用到hack，所以demo完整CSS代碼如下：
    </div>
    <div class="list_cell list_center">對於不支持display:table-cell屬性的IE6/7瀏覽器，又當如何解決呢？</div>
    <div class="list_cell ">對於不支持display:table-cell屬性的IE6/7瀏覽器，又當如何解決呢？</div>
  </div>
</body>

效果

多行文字居中

  <style>
    .parent {
      display: table;
      height: 300px;
      width: 1000px;
      border: 1px solid red;
    }

    .child {
      display: table-cell;
      /* 類似於表格中的單元格 */
      /* 使元素的中部與父元素的基線加上父元素x-height（譯註：x高度）的一半對齊。 */
      vertical-align: middle;
    }
  </style>

<body>
  <div class="parent">
    <div class="child">
      假如我現在有一個div，高度固定，裏面有一段文本，差不多跟上面的第二個差不多，但是不知道到底有多少行。如果用第二種方法，並且文本超過了一行，那肯定超出父元素了，如圖
    </div>
  </div>
</body>

左右佈局

  <style>
    .box {
      width: 60%;
      margin: 60px auto 0;
      padding: 20px;
      background: #f5f5f5;
    }

    p {
      margin: 0;
    }

    a img {
      width: 100px;
      margin-right: 10px;
      float: left;
    }

    .content {
      display: table-cell;
      /* *display: inline-block; */
    }
  </style>

<body>
  <div class="box f9 fix">
    <a class="l mr10"><img src="./images/1.jpg" /></a>
    <div class="content">
      <p><a></a>大美女一枚</a> 來自上海</p>
      <p class="mt5">簽名：想找個保鮮盒把你給我的那些感動都裝起來。當你讓我傷心的時候就拿出來回味一下。</p>
      <p class="mt5">
        微博：坐在辦公室，只聽轟隆隆幾聲巨響，晴天也能打雷嗎？原來街對面的芭莎咖啡廳被炸成了兩截。這定點爆破也太失敗了，也不清下場，把路過的汽車震得灰頭土臉，愣在路中央不知如何是好。其次，房子只炸了一半，另一半屹立不倒，是乍藥太水還是房子質量太好？
      </p>
    </div>
  </div>

注意：設置display: table-cell;後消除BFC同時，不會像inline-block和absolute效果一樣

圖片居中

  <style>
    ul {
      list-style: none;
    }

    .zxx_align_box_4 div {
      background-color: red;
      display: table-cell;
      width: 144px;
      height: 144px;
      line-height: 1.14;
      text-align: center;
      vertical-align: middle;
    }

    .zxx_align_box_4 div img {
      height: 134px;
      vertical-align: middle;
    }
  </style>
<body>
  <ul class="zxx_align_box_4 fix">
    <div><img src="./images/1.jpg" /></div>
  </ul>
</body>

效果