css 用 display: inline-block; 代替 float
浮动可以将两个块级元素浮动在同一水平上。但float的缺点也有很多,还需要其他样式弥补。
早年我使用过 display: inline-block; 但苦于兼容性问题一直没敢全面使用。
近几年主要玩移动端、何况IE已经淘汰的差不多了。应该可以放心使用了。大部分框架也能看到一些影子。
使用display: inline-block; 没什么好说的,但需要注意的是,它会产生一些不知名的间隙。导致元素可能还会被挤下来。解决方案是在父元素中加入font-size:0;
其他解决方案请百度。
css 用 display: inline-block; 代替 float的更多相关文章
- 大话css之display的Block未解之谜(一)
用了几年的css了,css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析,网上的分析文章也很多,零散. 今天有空,就在这做一下整理分析 b ...
- inline-block,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- CSS——display(Block none inline等)属性的用法
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...
- css 浅析display属性
继续开始我的css之旅吧.今天我们来说什么啊.构思了两天还是没有什么思路,但是学习的步伐我们不能停止下来.还是按照之前的计划来讲讲display,在讲这个之前我们还是按照老规矩来扯扯蛋,步子不能够迈大 ...
- CSS的display属性
网页设计中最常用的标签p.div.h1-h6(默认为块级元素),span(默认为内联元素) 内联,内嵌,行内属性标签: 1.默认同行可以继续跟同类型标签: 2.内容撑开宽度 3.不支持宽高 4.不支持 ...
- CSS display:inline和float:left两者区别探讨
本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...
- [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 ...
- CSS布局 ——从display,position, float属性谈起(转)
CSS布局 ——从display,position, float属性谈起 页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...
- display:inline,display:inline-block,display:block 区别
之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...
随机推荐
- 51nod 1137.矩阵乘法-矩阵乘法
1137 矩阵乘法 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 给出2个N * N的矩阵M1和M2,输出2个矩阵相乘后的结果. Input 第1行:1个数N, ...
- 分层图【p4568】 [JLOI2011]飞行路线
Description Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在nn个城市设有业务,设这些城市分别标记为\(0\)到\(n−1\),一共有\(m\)种航线 ...
- xml文件生成与下载
写在前面: 最近要做一个新的功能,点击按钮,可以根据数据生成对应的xml文件并保存.下面记录一下在做的过程的一些疑惑与问题(我就是太笨了,一些很简单的知识都不知道,不过通过这次跟蛋蛋的交流,解决了我的 ...
- IE8下 input标签内padding失效
在做网页兼容时 发现在ie8下的input内用padding失效 为了达到居中文字的效果 使用line-height可以解决问题
- 【Node.js】4.从一个例子切入Node js的规范
在开始之前,需要明确的一点就是, ①Node应用是由模块组成的,每一个文件都是一个模块,有自己的作用域. ②在这个文件里定义的变量,函数,类都是私有的,对其他的文件不可见. ③在一个文件中,也就是在一 ...
- CSS3:2D转换方法
利用transform 可以实现旋转.缩放.倾斜.移动 属性有:translate.scale 移动: translateX(10px); //水平方向移动10px translateY(50px); ...
- StringBuilder.append()与String的"+"的效率PK
如果String通过"+"来拼接,如果拼接的字符串是常量,则效率会非常高,因为会进行编译时优化,这个时候StringBuilder的append()是达不到的. 如果将String ...
- 全栈技术经理——团队管理:每周问问你的团队这这些问题 V1.0
全栈技术经理--团队管理:每周问问你的团队这这些问题 V1.0 1.本周取得了哪些进展? 通过回答这个问题可以让员工庆祝甚至夸耀一些自己的成果,包括那些跟最高优先级不相干而被忽视的小事情.借此你也 ...
- 2017.5.24 在intelliJ IDEA 中生成war包
1.勾选Build on make file -> project structure -> Artifacts 2.compile module "***" 选择项目 ...
- 在vs2010中编译log4cxx-0.10.0具体方法(从下载、编译、解决错误具体介绍)
一. 简单介绍 log4cxx是Java社区著名的log4j的c++移植版.用于为C++程序提供日志功能,以便开发人员对目标程序进行调试和审计,log4cxx是apache软件基金会的开源项目,基于A ...