浮动可以将两个块级元素浮动在同一水平上。但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. React Native解决Android的WebView无法执行injectedJavaScript代码

    需求 在用WebView组件写一个东西,要求功能:打开web后进行js代码注入. 开发 代码很简单,示例: const js = ` alert(1); alert(2); `; <WebVie ...

  2. 51nod 1432 独木舟【贪心】

    1432 独木舟 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题  收藏  关注 n个人,已知每个人体重.独木舟承重固定,每只独木舟最多坐两个人,可以坐一个人或者两 ...

  3. Codeforces Round #446 (Div. 2) A. Greed【模拟】

    A. Greed time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...

  4. SSO [ OAuth2.0 ]

    1) SSO英文全称Single Sign On,单点登录. SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统. 它包括可以将这次主要的登录映射到其他应用中用于同一个用户的 ...

  5. (转)Unity3D研究院之游戏架构脚本该如何来写(三十九)

     这篇文章MOMO主要想大家说明一下我在Unity3D游戏开发中是如何写游戏脚本的,对于Unity3D这套游戏引擎来说入门极快,可是要想做好却非常的难.这篇文章的目的是让哪些已经上手Unity3D游戏 ...

  6. linux之网络配置相关

    ubuntu的网络配置文件在 /etc/network/intrfaces; suse的网络配置在          /etc/sysconfig/network/下面,每个网卡一个配置文件. int ...

  7. App Distribution Guide (一)

    This guide contains everything you need to know to distribute an app through the App Store or Mac Ap ...

  8. select 下拉框的选中项的change事件

    HTML文件 <span style="float: left;">类      型:   <select id="type" class=& ...

  9. Tomcat部署多个应用时日志文件路径相同引起的问题

    今天给客户部署新系统,一个 前台应用,一个后台应用,由于用的是同一个架子,日志文件路径也没改,所以两个应用的日志文件是同一个文件,这样应用运行时,就会出现只能访问一个应用的情况,如果两个应用同时访问, ...

  10. A folder failed to be renamed or moved--安装Android SDK的问题

    对于Android是一直想学却一直未学,行动跟不上想法.现在,终于付诸于行动了. 首先,我找的第一个Android的资料是大话企业级Android,前阵子刚看完大话设计模式,通俗易懂,还是比较喜欢这一 ...