关闭

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

940人阅读 评论(0) 收藏 举报
分类:
<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;
}



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4275次
    • 积分:87
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:22篇
    • 译文:0篇
    • 评论:0条
    文章分类