table模型特性

table-cell 自动沾满

table-cell 自动沾满table

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>table模型</title>
  </head>
  <style>
      .box{
          width: 600px;
          height: 100px;
          display: table;
       }
       .left,.right{
          display: table-cell;
       }
       .left{
          
           background: yellowgreen;
       }
       .right{
      
           background: skyblue;
       }
  </style>
  <body>
      <div class="box">
          <div class="left">
              
          </div>
          <div class="right">
              
          </div>
      </div>
  </body>
</html>

设置其中一个table-cell的宽度为100px

<style>
       .box{
           width: 600px;
           height: 100px;
           display: table;
        }
        .left,.right{
           display: table-cell;
        }
        .left{
          width: 100px;
        background: yellowgreen;
        }
       .right{
       
            background: skyblue;
        }
   </style>

3.设置两个table-cell的宽度都为100

<style>
      .box{
          width: 600px;
          height: 100px;
          display: table;
       }
       .left,.right{
          display: table-cell;
       }
       .left{
          width: 100px;
           background: yellowgreen;
       }
       .right{
      width: 100px;
           background: skyblue;
       }
  </style>

4.空间平均划分

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>table模型</title>
  </head>
  <style>
      .box{
          width: 600px;
          height: 100px;
          display: table;
       }
       .a,.b,.c,.d{
          display: table-cell;
       }
       .a{
           background: yellowgreen;
       }
       .b{
       background: skyblue;
       }
        .c{
       background: palevioletred;
        }
         .d{
       background: hotpink;
         }
  </style>
  <body>
      <div class="box">
          <div class="a">
              
          </div>
          <div class="b">
              
          </div>
          <div class="c">
              
          </div>
          <div class="d">
              
          </div>
      </div>
  </body>
</html>

5.垂直居中

(vertical-align:middle )

<style>
      .box{
          width: 600px;
          height: 100px;
          display: table;
       }
       .a,.b,.c,.d{
          display: table-cell;
       }
       .a{
           background: yellowgreen;
           vertical-align: middle;
           text-align: center;
       }
       .b{
       background: skyblue;
       vertical-align: middle;
        text-align: center;
       }
        .c{
       background: palevioletred;
       vertical-align: middle;
        text-align: center;
        }
         .d{
       background: hotpink;
       vertical-align: middle;
        text-align: center;
         }
  </style>

6.实现等高对齐

上面的案例我故意不对右侧的box设置display:table-cell，只对左侧，所以就会出现左侧跟随右侧高度变化而变化，如果要实现不管两个box哪个高度产生变化另一个就跟随，只需要把右侧的box也设置成display:table－cell就可以实现了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
     *{
         box-sizing:border-box;
      }

       .content{
          display: table;
          border:1px solid #06c;
          padding:15px 15px;
          max-width: 1000px;
          margin:10px auto;
          min-width:320px;
          width:100%;
       }
       .img-box{
         height:150px;
         width:100px;
          border:1px solid red;
          display: table-cell;
          vertical-align: middle;
          text-align: center;
          background-color: #4679bd;
       }
       .text-box{
          margin-left: 20px;
          border:1px solid #ddd;
          padding:10px;
       }
    </style>
</head>
<body>
   <div class="content">
      <div class="img-box">
         [图片上传失败...(image-5e66ac-1553415098492)]
      </div>
     <div class="text-box">
         <span>
    王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了
然后发现都对对方一见钟情后，所以就愉快的生活在了一
起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，>有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。
         </span>
      </div>
    </div> 
</body>
</html>