今天做了两个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. linux grep 命令

    Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Print,表示全局正则表达 ...

  2. solr异常解决

    使用solr1.4跟solr3.1时,配置了个唯一id类型是sint 或者int,启动时在tomcat后台就会抛出这个异常: org.apache.solr.common.SolrException: ...

  3. 解决 xx.h has been modified since the precompiled header 系统头文件被修改

    fatal error: file '/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Dev ...

  4. 第九课,T语言数组的定义与访问(版本5.0)

    数组的定义与访问 数组是一系列数据的集合,可以存储大量数据,通过数组的下标.key,可以实现对数据的快速访问. 为什么要使用数组呢? 如果您有一个项目列表(例如汽车品牌列表),在单个变量中存储这些品牌 ...

  5. Github 笔记

    在本地创建并切换 git checkout -b your_branch_name 把本地分支的修改提交到远端的分支上 git push origin local_branch_name:remote ...

  6. 怎么使用jquery判断一个元素是否含有一个指定的类(class)

    在jQuery中可以使用2种方法来判断一个元素是否包含一个确定的类(class).两种方法有着相同的功能.2种方法如下:(个人喜欢用hasClass()) 1.           hasClass( ...

  7. Android学习二:Http操作

    1.初步认识HTTP HTTP(Hypertext Transfer Protocol超文本传输协议)是网络应用层协议,建立在TCP/IP基础上,HTTP使用可靠的TCP连接,默认端口是80. 较常用 ...

  8. 安卓中自定义并使用Volley框架请求网络

    大家好,今天我们讲一下如何使用Volley框架请求网络,为何要使用Volley框架,这就要先说一下使用Volley框架请求网络的优点了,volley是易于定制的,即你可以根据需求来设定volley框架 ...

  9. ImageMagick Windows x64下的安装

    在windows下安装ImageMagick时,安装的版本一定要跟php的插件是同一个的,包含vc++编译的版本. 我使用的是ImageMagick-6.9.3-7-Q16-x64-dll.exe 和 ...

  10. TOMCAT如何建立两个端口或服务

    近日,一个客户需要将系统放到公网上,局网测试的时候用的8080,但该端口已经被其它应用占用,但又不想更改之前的端口,于是查了下资料,以供后阅 针对客户的这个情况,只是说想增加一个端口,这时只需要去to ...