浮动可以将两个块级元素浮动在同一水平上。但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. 【原创】CMD命令设置IP地址

    问题描述 在实际工作中,尤其是像我们这种BI分析人员,在做项目的时候,时常都需要因客户的不同随时切换不同的网络环境,有时可能需要在公司和客户之间来回的穿梭.交替.问题也就随之而来:每次客户那里都需要设 ...

  2. AC日记——Vicious Keyboard codeforces 801a

    801A - Vicious Keyboard 思路: 水题: 来,上代码: #include <cstdio> #include <cstring> #include < ...

  3. 手机估值计算的jquery代码

    <script type="text/javascript"> $('#inquiry').click(function(){ var total=0; var cou ...

  4. POJ 2226.Muddy Fields-二分图最大匹配(最小点覆盖)

    Muddy Fields Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12565   Accepted: 4651 Des ...

  5. HDU 2955 【01背包/小数/概率DP】

    Robberies Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  6. 洛谷——P1469 找筷子

    P1469 找筷子 题目描述 经过一段时间的紧张筹备,电脑小组的“RP餐厅”终于开业了,这天,经理LXC接到了一个定餐大单,可把大家乐坏了!员工们齐心协力按要求准备好了套餐正准备派送时,突然碰到一个棘 ...

  7. Xamarin XAML语言教程Xamarin.Forms中构建进度条

    Xamarin XAML语言教程Xamarin.Forms中构建进度条 ProgressBar被称为进度条,它类似于没有滑块的滑块控件.进度条总是水平放置的.本节将讲解如何使用进度条. 注意:进度条在 ...

  8. 【bzoj4950】【 [Wf2017]Mission Improbable】贪心+二分图匹配

    (上不了p站我要死了,侵权度娘背锅) Description 那是春日里一个天气晴朗的好日子,你准备去见见你的老朋友Patrick,也是你之前的犯罪同伙.Patrick在编程竞赛 上豪赌输掉了一大笔钱 ...

  9. [LOJ6281]数列分块入门 5

    题目大意: 给你一个长度为$n(n\leq50000)$的序列$A(0\leq A_i<2^{31})$,支持进行以下两种操作: 1.将区间$[l,r]$中所有数开方: 2.询问区间$[l,r] ...

  10. centos下配置ssh使用密钥

    查询了网上的一些教程,然后根据自己的实际操作,记录自己实际配置ssh密钥的过程: 首先在centos终端切换到要链接的用户,比如用户ssh 使用该用户生成密钥: ssh-keygen -t rsa 中 ...