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}
相关阅读：模拟兼容性的 inline-block 属性 display:inline-block的深入理解
这篇文章发布于 2008年09月4日，星期四，15:16，归类于 CSS。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。
