南芝 – 我才12岁（孤独、快乐的生活在自己的世界里）

原文地址：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 浏览器下看看是什么效果？

继续阅读 »