浮动可以将两个块级元素浮动在同一水平上。但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. Mysql优化的方法

    一.表的优化: 1: 定长与变长分离 如 time.手机号等,每一单元值占的字节是固定的. 核心且常用字段,宜建成定长,放在一张表,查询速度会很快 而varchar, text,blob,这种变长字段 ...

  2. Laravel中ajax添加CsrfToken的方法

    //在模板文件的header头中添加 <meta name="_token" content="{{ csrf_token() }}"/> //aj ...

  3. react className的2种变量写法

    ES6新增的不少语法都是极好用的, 在拼接变量与字符串时,模版字符串``就是典型的用法 以下是2种写法 <div className={"bubble-box" +' '+` ...

  4. java的IO,AIO简单对比

    以下内容转载lzzzl Channel 通道 Buffer 缓冲区 Selector 选择器 其中Channel对应以前的流,Buffer不是什么新东西,Selector是因为nio可以使用异步的非堵 ...

  5. ACM的奇计淫巧系列

    突然想写个系列,算是总结总结集训中遇到的各种黑科技吧,这是目录 ACM的奇计淫巧_输入挂 ACM的奇计淫巧_扩栈C++/G++ ACM的奇计淫巧_bitset优化

  6. 2.5多线程(Java学习笔记)生产者消费者模式

    一.什么是生产者消费者模式 生产者生产数据存放在缓冲区,消费者从缓冲区拿出数据处理. 可能大家会问这样有何好处? 1.解耦 由于有了缓冲区,生产者和消费者之间不直接依赖,耦合度降低,便于程序拓展和维护 ...

  7. 使用ARC也可能发生内存泄露

    1,循环参照 A有个属性参照B,B有个属性参照A,如果都是strong参照的话,两个对象都无法释放. 这种问题常发生于把delegate声明为strong属性了. 例, @interface Samp ...

  8. CENTOS设置MYSQL字符集

    CENTOS设置MYSQL字符集 show variables like 'character_set%'; vim etc/my.cnf 修改成如下: [client] port=3306 sock ...

  9. adb 设备不识别

    android真坑 有两台测试机 都能连能snapdragon profiling了 忽然 一台不能识别了 adb devices 就不存在 一台一直是好的 kill server start ser ...

  10. 泳池水面fresnel 的近似替代

    vs float4 ep = TBMultiply(ModelViewMatrix, FinalPosition); DistFromEye.x = TBSaturate( 10.0 + ep.z / ...