CSS——布局布局神器display:table-cell

本文链接：https://blog.csdn.net/ZJH_are/article/details/125656295

display:table-cell

用float来做布局触发的问题比较多，例如要清除浮动，元素浮动后还会导致该元素脱离文档流，即使你清除float，该元素依旧是脱离文档流。

左右布局能用display:inline-block;布局我就用它来布局，但是还是无法完全不使用它，很多布局例如需要靠左和靠右的布局场景下就没办法不去使用float来布局。

元素两端对齐

第一个案例是让两个元素分别向左和向右对齐，如果是过去，我一定会用float来实现，但其实用table可以这么做：

 <!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%;
             }

            .box{
                width:100px;
                height:100px;
                border:1px solid #ccc;
                text-align: center;
                display: inline-block;
                font-size: 40px;
                line-height: 100px;
            }
           .right{
                text-align: right;
                display: table-cell;
            }
           .left{
                text-align: left;
                display: table-cell;
            }     
        </style>
   </head>
   <body>
       <div class="content">
            <div class="left">
                 <div class="box">B</div>
            </div>
            <div class="right">
                 <div class="box">A</div>
            </div>
       </div>
  </body>
  </html>

自动平均划分每个小模块，使其一行显示

第二个案例我们先看看图：

遇到上面这种布局，一般会用float来做，或者把每个li设置成display:inline-block;来做，并且都要设置给他们设置一个宽度，而且最痛苦的是5个li如果你设置width:20%;他们一定会掉下来，如果li都设置成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%;
                }
               .content ul{
                    display: table;
                    width:100%;
                    padding:0;
                    border-right:1px solid #ccc;
                }

               .content ul li{
                   display: table-cell;
                   border:1px solid #ccc;
                   text-align: center;
                   height:100px;
                   border-right: none;
                   line-height: 100px;
                }
          </style>
       </head>
       <body>
          <div class="content">
              <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
             </ul>
          </div>
       </body>
       </html>

图片垂直居中于元素

有时候我们需要让图片垂直水平都居中于某个元素，用常规写法比较复杂，但用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;
          }
         </style>
   </head>
   <body>
        <div class="content">
              <div class="img-box">
                 ![logo](http://upload-images.jianshu.io/upload_images/1432546-53d1c7f44dc6e873.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
              </div>
        </div>  
   </body>
   </html>