让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>

巴特西

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

最新文章

热门文章