参考文章:

http://www.zhangxinxu.com/wordpress/2010/11/%E6%8B%9C%E6%8B%9C%E4%BA%86%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80-%E5%9F%BA%E4%BA%8Edisplayinline-block%E7%9A%84%E5%88%97%E8%A1%A8%E5%B8%83%E5%B1%80/

总结:

display:inline-block:

1、不规则的高度

2、vertical-align:top

float:left:

1、高度相等,如果不相等,第二行的第一个元素会排到最高元素的右侧。

display:inline-block和float:left的选择的更多相关文章

  1. inline-block,inline,block,table-cell,float

    float:left ---------------------------------------------------------------------------------------- ...

  2. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  3. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  4. float:left 与display:inline的具体区别?

    设了float:left的元素允许它的右边存在任何元素同行显示,不论是内联元素还是块元素.但它的左边还是不允许存在任何元素与之同行显示,哪怕其它的元素的代码在前,除非也给前面的元素加上float:le ...

  5. display:inline,display:inline-block,display:block 区别

    之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...

  6. display:inline与display:block——行内元素显示与块级元素显示

    display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...

  7. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  8. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

  9. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  10. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

随机推荐

  1. OpenH264

    转自:http://blog.csdn.net/chinabinlang/article/details/41209053 目前最常用的264工程师x264: 最近有又有一个开源工程OpenH264, ...

  2. git(安装)配置

    安装: git安装程序下载:https://git-scm.com/. 配置: $ git config --global user.name "Your Name" $ git ...

  3. Josephus问题的不同实现方法与总结

    /************************************************************************/ /* Josephus问题--数组实现 */ /* ...

  4. Android高级开发专题晋升班

    Android高级开发专题晋升班 适用人群:1-3年以上经验的开发者丨学员平均薪酬20K/月

  5. maven插件报错之解决

    maven插件报错之解决 用m2eclipse创建Maven项目时报错 maveneclipsebuilddependenciesauthorizationplugins 用m2eclipse创建 ...

  6. CPU和GPU的区别

    个人认为CPU和GPU各有自己的适应领域.CPU(Central Processing Unit)计算核心较少,通常是双核.四核.八核,但是拥有大量的共享缓存.预测.乱序执行等优化,可以做逻辑非常复杂 ...

  7. [转]Delphi中QuotedStr介绍及使用

    转自:http://www.360doc.com/content/13/0524/09/7873422_287679198.shtml 使用S:string; qry2.SQL.add('select ...

  8. PHP中使用CURL之备忘(一)

    1.curl只能抓取页面的部分内容的原因分析: 错误提示:CURL transport error: transfer closed with outstanding read data remain ...

  9. 【IE6的疯狂之三】IE6 3像素BUG的实例

    问题:2列布局.左列固定,右列液态我需要做一个布局.2列,左边列固定宽度.右边列使用剩余宽度.整体宽度不固定,这样不管在17 还是19的屏幕上,左边列始终宽度不变,右边列宽度始终占据剩余宽度.但是我写 ...

  10. HTML中判断手机是否安装某APP,跳转或下载该应用

    有些时候在做前端输出的时候,需要和app的做些对接工作.就是在手机浏览器中下载某app时,能判断该用户是否安装了该应用.如果安装了该应用,就直接打开该应用:如果没有安装该应用,就下载该应用.那么下面就 ...