table-call布局

CSS布局技巧精讲

最新推荐文章于 2021-03-22 17:12:04 发布

原创最新推荐文章于 2021-03-22 17:12:04 发布 · 585 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#table-call #布局 #css #图片居中 #文字居中

css 专栏收录该内容

32 篇文章

订阅专栏

学习了旭哥的文章总结

等分

  <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>

效果