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;
}



相关文章推荐

比float更好的网页布局之inline-block

讲解一种更易于控制和更为健壮的网页布局技术,适合已经学过html和css并对div+css的常规浮动布局有一定理解和经验的学习者或前端开发人员。

css中使块级元素同行显示

提问:我们如何使两个块级元素位于同一行? 回答:设置float属性\(^o^)/~ 将块级元素的css格式设置为float:left/right,比如,有两个panel,panelA和panelB,想...

float和display:inline-block

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

[CSS]display:inline-block

很多时候我们必须使一些块元素并排显示,一般想到的是必须使用浮动,但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG,所以很多时候不得不把这个块元素套在一个内联元素里面,然后给内联元素...

css中display:inline-block错位问题

就目前来说,常用的布局方式有table、div,因为使用table都是比较规整、传统的布局方式,现在大部分网页为了美观,大多使用div进行布局,使用div布局就避免不了对块级元素的布局调整,在仿作百度...

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

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

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

引用:http://www.duidea.com/2012/1129/1606_2.html 你真的了解 inline-block 了吗?本文将带你深入剖析该属性值的前世今生,让你更好的理解...

DIV CSS display (block none inline)属性的用法

原文:http://www.cnblogs.com/Bill_Lee/archive/2011/04/11/2013110.html DIV CSS display (block n...

css中display:inline-block

很多时候我们必须使一些块元素并排显示,一般想到的是必须使用浮动,但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG,所以很多时候不得不把这个块元素套在一个内联元素里面,然后给内联元素...

CSS中多列块的实现小结 display : inline-block 内联块

最近在折腾HTML5和CSS3    -->   示例页面 在做网页菜单的时候,最上面需要加一行工具栏,并排放的,那我想弄四个等宽的box,然后并排放,这样以后想扩展也很好扩展。 刚开...
  • misol
  • misol
  • 2011-11-03 19:40
  • 2663
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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