佈局神器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也不是不能夠，根據本身對屬性的理解去使用就能夠了。