display:inline-block-优快云博客

原文地址：Let’s All Get Inline (In a Block, In a Block)

文章概要：display:inline-block 是一个经常用到的属性，它的意思就是将对象呈现为内联对象，然后对象的内容作为块对象。使用它我们可以轻松的使用 text-align 来将这些元素居中，如果使用 float，我们还不能很好的控制他们居中，因为毕竟我们还没有 float:center。但是这个属性在 ie8 以下和 Firefox 2 中却没有得到支持，Firefox 有一个类似的私有属性（-moz-inline-box）能够产生类似的效果，但是它却能带来一些 bug。

首先我们在支持 display:inline-block 的浏览器中（Opera、Safari、Firefox 3、IE 8）运行以下代码，看看会是什么样的效果？

HTML代码：

<div class="cols">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc commodo lorem ut justo.</p>

<p>Ut molestie libero quis massa elementum tristique. Aliquam erat volutpat.</p>

<p class="last">Duis purus diam, gravida et, mattis eget, semper ac, tellus. Suspendisse velit nunc, varius ut, pharetra malesuada, suscipit ut, lacus.</p>

</div>

CSS 代码：

.cols{
width:44em;
margin :auto;
text-align:center;/* centers inline-blocks/
border:1px solid #000;
padding:10px;
}
.cols p {
display:inline-block;/ FF3, Opera, Safari /
width:12em;
margin:0 1em 0 0;/ need to remove top and bottom margin from p element/
padding:0.5em;
border:1px solid #009;
vertical-align:bottom;/ align to bottom /
background:#f00;
}
.cols p.last{margin:0}/ remove right margin from last element so that they are all centered*/

我们可以看到如下图所示的效果：

那么，现在我们添加 Firefox 的私有属性后，在 Firefox 2 浏览器下看看是什么效果？

CSS 代码：

.cols{
width:44em;
margin :auto;
text-align:center;/* centers inline-blocks/
border:1px solid #000;
padding:10px;
}
.cols p {
display:-moz-inline-box;/ Firefox 2 and under/
display:inline-block;/ FF3, Opera, Safari /
width:12em;
margin:0 1em 0 0;/ need to remove top and bottom margin from p element/
padding:0.5em;
border:1px solid #009;
vertical-align:bottom;/ align to bottom /
background:#f00;
}
.cols p.last{margin:0}/ remove right margin from last element so that they are all centered*/

我们看到的是如下图所示的效果：

这时我们需要做的就是在其中另外添加一个盒子，让它撑起外边的盒子，看下该进后的代码：

HTML 代码：

<div class="cols">

<div>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc commodo lorem ut justo.</p>

</div>

<div>

<p>Ut molestie libero quis massa elementum tristique. Aliquam erat volutpat.</p>

</div>

<div class="last">

<p>Duis purus diam, gravida et, mattis eget, semper ac, tellus. Suspendisse velit nunc, varius ut, pharetra malesuada, suscipit ut, lacus.</p>

</div>

</div>

CSS 代码：

.cols{
width:44em;
margin :auto;
text-align:center;/* centers inline-blocks/
border:1px solid #000;
padding:10px;
}
.cols div {
display:-moz-inline-box;/ Firefox 2 and under/
display:inline-block;/ FF3, Opera, Safari /
width:12em;
margin:0 1em 0 0;/ need to remove top and bottom margin from p element/
padding:0.5em;
border:1px solid #009;
vertical-align:bottom;/ align to bottom /
background:#f00;
}
.cols div.last{margin:0}/ remove right margin from last element so that they are all centered*/
.cols div p{width:11em}

这样子我们就解决了 Firefox 遗留下的 bug，但是在 IE8 以下的浏览器呢？原理就是触发 layout，然后使用 display:inline。有两种方法，一是首先使用 display:inline-block，然后使用 display:inline，一是使用 zoom:1.0。来看一下最终的代码把：

HTML 代码：

<!--[if lt IE 8]>

<style type="text/css">

.cols div{display:inline}

</style>

<![endif]--> 

<div class="cols">

<div>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc commodo lorem ut justo.</p>

</div>

<div>

<p>Ut molestie libero quis massa elementum tristique. Aliquam erat volutpat.</p>

</div>

<div class="last">

<p>Duis purus diam, gravida et, mattis eget, semper ac, tellus. Suspendisse velit nunc, varius ut, pharetra malesuada, suscipit ut, lacus.</p>

</div>

</div>

CSS 代码：

.cols{
width:44em;
margin :auto;
text-align:center;/* centers inline-blocks/
border:1px solid #000;
padding:10px;
}
.cols div {
display:-moz-inline-box;/ Firefox 2 and under/
display:inline-block;/ FF3, Opera, Safari /
width:12em;
margin:0 1em 0 0;/ need to remove top and bottom margin from p element/
padding:0.5em;
border:1px solid #009;
vertical-align:bottom;/ align to bottom /
background:#f00;
}
.cols div.last{margin:0}/ remove right margin from last element so that they are all centered*/
.cols div p{width:11em}