利用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; }