布局神器display:table-cell

元素兩端對齊

    第一個案例是讓兩個元素分別向左和向右對齊，如果是過去，我一定會用float來實現，但其實用table可以這么做：

    

* {
    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
}

　

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

　　

自動平均划分每個小模塊，使其一行顯示

第二個案例我們先看看圖：

        遇到上面這種布局，一般會用float來做，或者把每個li設置成display:inline-block;來做，並且都要給他們設置一個寬度，而且最痛苦的是5個li如果你設置width:20%;他們一定會掉下來，如果li都設置成display:table-cell；就不會出現這種情況，即使不設置寬度他們也會在一行顯示，你在加多一行他也不會掉下來，依舊會在一樣顯示。

* {
    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;
}

　　

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

　　

圖片垂直居中於元素

 

<div class="content">
    <div class="img-box">
        <img src="http://jsfiddle.net/img/[e-mail]" alt="logo" /> 
    </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{
    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/[e-mail]" 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就可以實現了。

 

彈性、響應式布局

<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也不是不可以，根據自己對屬性的理解去使用就可以了。