`
iwebcode
  • 浏览: 1997127 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

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的深入理解

分享到:
评论

相关推荐

    有关display:inline-block在FF出现空白的解决方案

    NULL 博文链接:https://qiyan86-163-com.iteye.com/blog/551754

    CSS属性display:inline-block用法深入理解

    在使用CSS实现表现的时候,会经常接触到display:inline-block这一属性,它可以将对象呈递为内联对象,但是对象的内容作为块对象呈递,旁边的内联对象会被呈递在同一行内,允许空格。本文向大家描述一下CSS属性...

    display:inline-block的使用示例

    建立一个宽度很长的一个页面,里面包含许多列,外面的div块的宽度不能确定,若是外面的div块的宽度不够 就会导致部分子div块移动到下面的一行,下面与大家分享下display:inline-block的使用示例

    深入解析CSS的display:inline-block属性的使用

    但是,由于display:inline-block最大的不同就是其没有父元素的匿名包裹特性,这使得display:inline-block属性的使用非常自由,可与文字,图片混排,可内嵌block属性元素,可以可以置身于inline水平的元素中。...

    display:inline-block的原理分析

    在使用 CSS 实现表现的时候,会经常接触到 display:inline-block 这一属性,大都会对这一属性感觉很迷惑和模糊,本文将详细介绍,需要了解的朋友可以参考下

    [转]关于display: inline,block,inline-block 的详细应用

    NULL 博文链接:https://hc24.iteye.com/blog/832493

    display:inline、block、inline-block的区别(转的)

    NULL 博文链接:https://tianqiushi.iteye.com/blog/2101378

    关于css display: inline block inline-block的区别分析

    display:inline-block 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。 但对于这个属性不是所有浏览器都识别。 支持的浏览器有:Opera、Safari。 但很遗憾,最...

    让IE6/IE7支持display:inline-block属性的两种方法

    在IE6和IE7中这个版本的IE流量器中,对display:inline-block属性支持不佳,下面为大家准备两种方法可以解决此问题,让IE6/IE7 支持 display:inline-block 的方法,感兴趣的朋友可以了解下

    使用display:inline-block居中没有宽度的元素

    为要居中元素的父元素应用text-align:center,为要居中的元素设定display:inline-block.这样设定就可以得到我们想要的结果

    深入display:inline-block

    在使用 CSS 实现表现的时候,会经常接触到 display:inline-block 这一属性,无论是初接触 Web 标准还是接触标准已久的朋友,大都会对这一属性感觉很迷惑和模糊。display:inline-block 将对象呈递为内联对象,但是...

    display:inline-block的实际应用

    NULL 博文链接:https://qiyan86-163-com.iteye.com/blog/554746

    css解决display:inline-block;产生的缝隙(间隙)的方法

    今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙,这很显然不是我想要的效果,所以我就换成了左浮动,这样缝隙的问题是解决了,但是需要设置父元素的宽度...

    CSS中使用inline-block来进行居中的示例

    基本方法是使用 display: inline-block, vertical-align: middle样式和伪元素让内容块在容器中居中。我的实现用到了几个在其他地方见不到的新技巧解决了一些问题。  内容区声明的宽度不能大于容器的100% 减去0.25em...

    如何解决IE6/IE7不识别display:inline-block属性

    ie6,ie7的haslayout属性是个让人头疼的问题,想到一个属性display:inline-block;对!inline- block就是干这个事的,让一个元素既不换行又具有block元素的特性

    IE6的inline-block

    1、display:inline-block 让一个元素具有“区块元素”的属性(可以设置width和height),又具有“内联元素”的属性(不产生换行)。 2、IE中的inline-block IE6不支持这个属性,但IE8开始支持这个属性。 让IE6...

Global site tag (gtag.js) - Google Analytics