布局神器display:table-cell

元素两端对齐

    第一个案例是让两个元素分别向左和向右对齐，若是是过去，我必定会用float来实现，但其实用table能够这么作：

 

HTML：

<div class="content">
    <div class="left">
        <div class="box">B</div>
    </div>
    <div class="right">
        <div class="box">A</div>
    </div>
</div>

CSS:

* {
    box-sizing: border-box;
}
.content {
    display: table;
    border: 1px solid #06c;
    padding: 15px 5px;
    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
}

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

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

遇 到上面这种布局，通常会用float来作，或者把每一个li设置成display:inline-block;来作，而且都要设置给他们设置一个宽度，并且 最痛苦的是5个li若是你设置width:20%;他们必定会掉下来，若是li都设置成display:table-cell；就不会出现这种状况，即便 不设置宽度他们也会在一行显示，你在加多一行他也不会掉下来，依旧会在同样显示

<div class="content">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

* {
    box-sizing: border-box;
}

.content {
    display: table;
    border: 1px solid #06c;
    padding: 15px 5px;
    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;
}

图片垂直居中于元素

有时候咱们须要让图片垂直水平都居中于某个元素，用常规写法比较复杂，但用table-cell则相对简单.

<div class="content">
    <div class="img-box">
        <img src="http://jsfiddle.net/img/logo@2x.png" alt="logo" /> 
    </div>

* {
    box-sizing: border-box;
}

.content {
    display: table;
    border: 1px solid #06c;
    padding: 15px 5px;
    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;
}

两box实现等高对齐

上图中的左侧的box的高度始终跟随右侧的box的高度变化而变化：

<div class="content">
    <div class="img-box">
        <img src="http://jsfiddle.net/img/logo@2x.png" width="70" alt="logo" /> 
    </div> 
    <div class="text-box">
        <span>王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，而后发现都对对方一见倾心后，因此就愉快的生活在了一块儿。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，而后发现都对对方一见倾心后，因此就愉快的生活在了一块儿。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，而后发现都对对方一见倾心后，因此就愉快的生活在了一块儿。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，而后发现都对对方一见倾心后，因此就愉快的生活在了一块儿。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，而后发现都对对方一见倾心后，因此就愉快的生活在了一块儿。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，而后发现都对对方一见倾心后，因此就愉快的生活在了一块儿。。。。。</span>
    </div>
</div>

* {
    box-sizing: border-box;
}
.content {
    display: table;
    border: 1px solid #06c;
    padding: 15px 5px;
    max-width: 1000px;
    margin: 10px auto;
    min-width: 320px;
    width: 100%;
}
.img-box{
    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;
}

 上 面的案例我故意不对右侧的box设置display:table-cell，只对左侧，因此就会出现左侧跟随右侧高度变化而变化，若是要实现无论两个 box哪一个高度产生变化另外一个就跟随，只须要把右侧的box也设置成display:table－cell就能够实现了。

弹性、响应式布局

        上 面的demo中你们只要改变浏览器宽度就会发现他们其实都是会随高度变化自动变化高度的，其实上面内容我大部分没有设置绝对单位，即便设置了也只设置其中 一个box另外一个就让他去自适应父元素的剩余留下来的宽度，其实布局的时候设置宽度是一件很痛苦的事情，由于除了大量计算有时候可能在多浏览器下还算不 准，可能你在chrome设好的宽度在ie下就坑爹了，要写hack才能解决。最后一个案例，据不靠谱的传言faceboox曾经也这么使用过

 

<div class="content">
        <div class="left-box">
            <img src="https://www.google.com.hk/images/srpr/logo11w.png" width="70" alt="logo" />  
        </div>
        
        <div class="right-box">
            <span>王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，而后发现都对对方一见倾心后，因此就愉快的生活在了一块儿。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，而后发现都对对方一见倾心后，因此就愉快的生活在了一块儿。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，而后发现都对对方一见倾心后，因此就愉快的生活在了一块儿。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，而后发现都对对方一见倾心后，因此就愉快的生活在了一块儿。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，而后发现都对对方一见倾心后，因此就愉快的生活在了一块儿。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，而后发现都对对方一见倾心后，因此就愉快的生活在了一块儿。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，而后发现都对对方一见倾心后，因此就愉快的生活在了一块儿。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，而后发现都对对方一见倾心后，因此就愉快的生活在了一块儿。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，而后发现都对对方一见倾心后，因此就愉快的生活在了一块儿。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，而后发现都对对方一见倾心后，因此就愉快的生活在了一块儿。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，而后发现都对对方一见倾心后，因此就愉快的生活在了一块儿。。。。。</span>
        </div>
    </div>

* {
    box-sizing: border-box;
}
.content {
    display: table;
    border: 1px solid #06c;
    padding: 15px 5px;
    max-width: 1000px;
    margin: 10px auto;
    min-width: 320px;
    width: 100%;
}
.left-box {
    float:left;
    margin-right: 10px;
    padding-top:5px;
}

.right-box {
    display: table-cell;
    padding: 10px;
    border: 1px solid #ccc;
    margin-right: 10px;
    vertical-align: top;
}

 

        移动端布局由于有display:box这等属性，因此table-cell相对就排不上什么大用场，不过在移动端你要用table-cell也不是不能够，根据本身对属性的理解去使用就能够了。