table-cell實現寬度自適應布局

利用table-cell可以實現寬度自適應布局。

table-cell有一些比較好用的屬性，比如垂直居中，自適應高度寬度等，為元素設置table-cell布局之后，元素的margin失效，padding有效，

而且一旦元素設置了float或者absolute，則table-cell也會失效。

table-cell不兼容IE6,7.但是可以通過觸發hasLayout來實現近似的效果。

以下可以實現寬度自適應布局：

　　

<div class="wrapper">
        <img src="../../img/1.jpg" width="150">
        <span class=".table-cell">引語：最近在給學生講解WEB前端開發的HTML和CSS基本知識，
            學生要面對“表單”的制作。我喜歡把“表單”稱之為初入前端的人的“惡夢”。不得不說，表單這
            個東西在前端開發的時候，問題是相當之多的，從嵌套規則、書寫習慣，到瀏覽器的兼容問題，
            有很多需要注意的地方。在此總結一下，以方便開發。</span>
 </div>


        
        .wrapper{background: #FFCCCC;overflow: hidden;zoom:1;min-width:400px;}
        img{float:left;}
        .table-cell{
            display: table-cell;
            *display: inline-block;
            width:3000px;
        }