佈局神器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/logo@2x.png" 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/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就能夠實現了。

 

彈性、響應式佈局

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