浮动可以将两个块级元素浮动在同一水平上。但float的缺点也有很多,还需要其他样式弥补。

早年我使用过 display: inline-block; 但苦于兼容性问题一直没敢全面使用。

近几年主要玩移动端、何况IE已经淘汰的差不多了。应该可以放心使用了。大部分框架也能看到一些影子。

使用display: inline-block; 没什么好说的,但需要注意的是,它会产生一些不知名的间隙。导致元素可能还会被挤下来。解决方案是在父元素中加入font-size:0;

其他解决方案请百度。

css 用 display: inline-block; 代替 float的更多相关文章

  1. 大话css之display的Block未解之谜(一)

    用了几年的css了,css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析,网上的分析文章也很多,零散. 今天有空,就在这做一下整理分析 b ...

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

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

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

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

  4. CSS——display(Block none inline等)属性的用法

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...

  5. css 浅析display属性

    继续开始我的css之旅吧.今天我们来说什么啊.构思了两天还是没有什么思路,但是学习的步伐我们不能停止下来.还是按照之前的计划来讲讲display,在讲这个之前我们还是按照老规矩来扯扯蛋,步子不能够迈大 ...

  6. CSS的display属性

    网页设计中最常用的标签p.div.h1-h6(默认为块级元素),span(默认为内联元素) 内联,内嵌,行内属性标签: 1.默认同行可以继续跟同类型标签: 2.内容撑开宽度 3.不支持宽高 4.不支持 ...

  7. CSS display:inline和float:left两者区别探讨

     本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...

  8. [CSS3] CSS Display Property: Block, Inline-Block, and Inline

    Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...

  9. CSS布局 ——从display,position, float属性谈起(转)

    CSS布局 ——从display,position, float属性谈起   页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...

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

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

随机推荐

  1. XXXX公司微课大赛技术储备

    XXXX公司微课大赛技术储备 发短信验证 http://www.yunpian.com/ 发邮件 http://sendcloud.sohu.com/ flash头像上传组件 http://www.h ...

  2. 洛谷——P1679 神奇的四次方数

    P1679 神奇的四次方数 题目描述 在你的帮助下,v神终于帮同学找到了最合适的大学,接下来就要通知同学了.在班级里负责联络网的是dm同学,于是v神便找到了dm同学,可dm同学正在忙于研究一道有趣的数 ...

  3. RMI,socket,rpc,hessian,http比较

    SOCKET使用时可以指定协议TCP,UDP等: RIM使用JRMP协议,JRMP又是基于TCP/IP: RPC底层使用SOCKET接口,定义了一套远程调用方法: HTTP是建立在TCP上,不是使用S ...

  4. SQL 统计某一列出现的总和

    现有数据如上图所示,要求统计出日期相同的Count总数,并且加一列统计前面日期Count的总和 SELECT SUM([Count]) AS DayTotal, SUM(SUM([Count])) o ...

  5. IE8下 input标签内padding失效

    在做网页兼容时 发现在ie8下的input内用padding失效 为了达到居中文字的效果 使用line-height可以解决问题

  6. Android自定义View(二)

    前言 魅族手机的闹钟应用中有个倒计时,这个控件还是蛮有趣的.左边是魅族闹钟,右边是我们最终实现的效果,虽然有些细节还需优化,不过基本上已经达到了想要的效果,我们先来就来看看如何实现吧. 分析 确定宽高 ...

  7. Navicat 破解版的安装

    因为电脑系统换掉,重装系统,重新配置了一下环境,安装Navicat,现记录一下过程,以便下次查询使用. 我们首先百度搜索一款navicat for mysql然后进行下载. 2 当我们下载完成之后首先 ...

  8. ubuntu常用 命令

    卸载软件 ,比如chrome sudo apt-get remove google-chrome-stable

  9. php设计模式之建造者模式

    建造者模式 建造者设计模式的目的是消除其他对象的复杂创建过程.使用建造者设计模式不仅是最佳的做法,而且在摸个对象的构造和配置方法改变时候,可以尽可能的减少重复更改代码. <?php /** *p ...

  10. Qt之QStyledItemDelegate类

    主要用于自定义项的display和编辑: 通常有两个重载函数: // 决定该单元格的推荐大小 virtual QSize sizeHint(const QStyleOptionViewItem &am ...