讓div排成一行===>inline-block的兼容性

行內元素，排列在一行，但是不能設置它的width、height、margin、padding屬性，即使設置了，也是不生效的。

快元素獨占一行，如下的這個例子，before div、in div1、in div2、after div分別占一行，也就是說，塊元素前后都不能有行內元素和文本節點。

    before div<div style="display:inline-block">in div1</div> <div style="display:inline-block">in div2</div> after div

那么如何讓div 可以排列在一行呢？

用如下的方式：

div{
     display:inline-block;//如果網站只兼容谷歌和火狐，這樣寫就可以
}
div{
     display:inline-block;//但是IE不支持inline-block，需要這么寫，這樣寫3個瀏覽器
                                 //就可以都兼容了
     *display:inline;
     *zoom=1;
}

而且：當我們對div設置成了inline-block的時候，同樣可以對其設置width、height屬性，如果要讓其居中，就不需要margin:0 auto;了，因為他具有了inline的特性，所以用text-align:center就行了。

例子：如下代碼，執行之后，里面的div就是居中的，有寬，有高。

<div style="border:solid;width:500px;height:400px;text-align:center;">
        <div style="border: solid; width: 300px; height: 200px;display:inline-block;">inline-block div</div>
    </div>

當我們對一個行內元素<span>設置成inline-block的時候，它也是可以有寬有高的（當我們不設置成inline-block的時候，它默認是inline，給他設置寬高，沒效果）

<span style="border: solid; width: 300px; height: 200px;">The Span hava width and height</span>