今天做了两个inline-block元素,出现左右两个元素顶端出现上下不对齐的情况(下图):

解决办法:

把应用 inline-block的元素加上 vertical-align: top;

.CSSElement{display: inline-block; vertical-align: top;}

display:inline-block左右元素上下不对齐的更多相关文章

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

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

  2. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  3. display inline or block

    一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置   margi ...

  4. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  5. display:inline 跟 display:block 跟 display:inline-block区别

    我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...

  6. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  7. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  8. display:inline、block、inline-block区别

    display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...

  9. display:inline、block、inline-block的区别(摘抄)

    display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...

  10. display:inline、block、inline-block三者之间的区别

    1. display:block就是将元素显示为块级元素. block元素的特点: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度:(<d ...

随机推荐

  1. 修改crontab默认的编辑器

    1.crontab默认的编辑器为nano; 2.修改为vi或其他编辑器 export EDITOR="/usr/bin/vim" ; crontab -e

  2. 记录以下boost::shared_ptr的一个使用细节

    shared_ptr<T>::operator->返回的是T*类型指针,非const T*指针.因此通过const shared_ptr<T>&类型的ptr可以直 ...

  3. linux常见目录的作用

    根目录下的bin 和sbin,usr目录下的bin和sbin四个都是保存系统命令.bin下的普通用户都可以使用,sbin下只有超级用户root可以使用 pro和syc不能直接操作,是内存的过载点 / ...

  4. mm/kmalloc.c

    /* *  linux/mm/kmalloc.c * *  Copyright (C) 1991, 1992  Linus Torvalds & Roger Wolff. * *  Writt ...

  5. 第一篇T语言实例开发(版本5.3),带错误检测的加减乘除运算器

    带错误检测的加减乘除运算器 表达式 TC综合开发工具里的表达式大体分为:计算表达式.条件表达式 计算表达式: 它一般是用在赋值过程中,或者是和条件表达式混合使用这样的表达式里只有数字运算符(如:+.- ...

  6. DHCP服务器安装及配置

    一.什么是DHCP? DHCP (Dynamic Host Configuration protocol)动态主机设置协议,基于UDP(发送很小的数据报文,且对时效性要求较高)协议通信. 它是C/S架 ...

  7. android之 listview加载性能优化ViewHolder

    在android开发中Listview是一个很重要的组件,它以列表的形式根据数据的长自适应展示具体内容,用户可以自由的定义listview每一列的布局,但当listview有大量的数据需要加载的时候, ...

  8. Webview 与h5的交互

    步骤:H5代码   <html>   <head>   <meta charset="UTF-8">   <title>交互Demo ...

  9. C++实现不能被继承的类——终结类 分类: C/C++ 2015-04-06 14:48 64人阅读 评论(0) 收藏

    1.       问题 C++如何实现不能被继承的类,即终结类.Java中有final关键字修饰,C#中有sealed关键字修饰,而C++目前还没有类似的关键字来修饰类实现终结类,需编程人员手动实现. ...

  10. 合并excel-MergeExcel

    MergeExcel 将需要合并的excel放入该目录下,包含xls和xlsx 点击运行按钮: 输入包含多少列: 等待运行,完毕! 基于python编写,源码和exe于 TTyb