CSS 用display:inline-block代替float: left排版注意事项

转载 2016年05月30日 11:17:58
<div>
     <div style="display:inline-block">此处显示新 Div1标签的内容</div>
     <div style="display:inline-block">此处显示新 Div2标签的内容</div>
     <div style="display:inline-block">此处显示新 Div3标签的内容</div>
</div>
效果如图:
此处显示新 Div1标签的内容
 
此处显示新 Div2标签的内容
 
此处显示新 Div3标签的内容


在CSS中,块级对象元素会单独占一行显示,多个block元素会各自新起一行,并且可以设置width,height属性;而内联对象元素前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满,对inline元素设置width,height属性无效。
我们有个时候既希望元素具有宽度高度特性,又具有同行特性,这个时候我们可以使用inline-block。在CSS中通过display:inline-block对一个对象指定inline-block属性,简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

http://www.w3cplus.com/css/inline-blocks.html

inline-block是什么?

Inline-block是元素display属性的一个值。这个名字的由来是因为,display设置这个值的元素,兼具行内元素( inline elements)跟块级元素(block elements)的特征。

  1. 块级元素(block elements),来源于CSS盒子模型。块级元素包含width height,padding,border与margin,他们的排列方式是从上到下排列。 行内元素,排列方式是水平排列。
  2. 行内元素(inline elements)排列方式是水平排列。
  3. 行内块元素(inline-block elements)在内部他的表现类似block元素,比如他拥有block元素的width height,padding,border与margin,而外部的排列方式有类似行内元素,即水平排列,而不是像块级元素一样从上到下排列 
!注意!:行内元素,默认按文字底部对齐。


div#left,div#right{
      border-style:solid;
    border-width:3px;
    border-color:#F00;
}
#left{
    width:35%;
    display:inline-block;
    height:300px;
}
#right{
    width:35%;
    display:inline-block;
    height:300px;
}
<div id="left">
    <p>123</p>
    <ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>
    <hr />
    <hr />
    <hr />
    <hr />
</div>

<div id="right">
    <p>123</p>

</div>


由于采用display:inline-block排版,而行内元素,默认按文字底部对齐。

这种情况用float排版 可以对齐div

#left{
    width:35%;
    float:left;
    height:300px;
    
}
#right{
    width:35%;
    float:left;
    height:300px;
}



css3盒布局取代float布局

下面来写一个布局,上面分三列,底部还有两个一列。 1. 用float浮动来写 注意,上面三个div都固定了宽度且向左浮动,红色div使用clear:both属性 问题来了:就是上面三个浮动的div,高...
  • xuanwuziyou
  • xuanwuziyou
  • 2015年08月30日 18:40
  • 1599

应不应该使用inline-block代替float

inline-block float 本文由99根据Steven Bradley的《Should You Use Inline-Bl...
  • fivedoumi
  • fivedoumi
  • 2016年03月13日 16:04
  • 1036

css兼容教程(css中!important介绍)

css兼容教程   css兼容教程div+css使用!important标记区别Firefox和IE6 [使用!important标记可以区别Firefox和IE6] Firef...
  • DrifterJ
  • DrifterJ
  • 2013年01月29日 20:07
  • 5527

css3盒布局取代float布局

下面来写一个布局,上面分三列,底部还有两个一列。 1. 用float浮动来写 注意,上面三个div都固定了宽度且向左浮动,红色div使用clear:both属性 问题来了:就是上面三个浮动的div,高...
  • xuanwuziyou
  • xuanwuziyou
  • 2015年08月30日 18:40
  • 1599

解决CSS中float:left后需要clear:both清空的繁琐步骤

1.传统处理方式: 1 li {float:left;}/*这样,对固定宽度导航条来说,li不能自动居中*/     2.inline-block方式: ...
  • CherishLyf
  • CherishLyf
  • 2015年08月27日 19:47
  • 1695

“display:block-inline形式的Span或Div中添加文字后,导致Span或Div排版掉落、错位”的原因及解决方法

在开始用display:inline-block的时候,只知道有baseline这么一说,而且当时记笔记解决了空隙问题,百度一堆文章,什么终极解决办法等等,还记录了一些问题,当时不明白,到今天才明白v...
  • Esther_Heesch
  • Esther_Heesch
  • 2016年05月07日 23:34
  • 5865

第三期《float 与 display:inline-block的区别是什么》

介绍 HTML的元素有多种display属性,比较常见的有display:none; display:block; display:inline和display:inline-block;等。 ...
  • qq_30628821
  • qq_30628821
  • 2018年01月09日 09:30
  • 17

float和display:inline-block

float和display:inline-block    都能使两个块形元素并排 下面是div部分代码 使用float时结果是 *{ ...
  • q_A_p
  • q_A_p
  • 2016年11月21日 10:12
  • 223

【CSS笔记之十】深入认识display:inline-block和hasLayout

【CSS笔记之十】display:inline-block和hasLayout hasLayout设计的初衷是用于辅助块级元素的盒子模型的,它是用于块级元素的。如果用于行内元素,会引发一些特殊效果。...
  • freshlover
  • freshlover
  • 2012年05月16日 18:21
  • 3800

css中display:inline-block属性值的空隙消除

引用:http://www.duidea.com/2012/1129/1606_2.html 你真的了解 inline-block 了吗?本文将带你深入剖析该属性值的前世今生,让你更好的理解...
  • noob_pudding
  • noob_pudding
  • 2014年08月22日 11:25
  • 750
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS 用display:inline-block代替float: left排版注意事项
举报原因:
原因补充:

(最多只允许输入30个字)