今天做了两个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. MySQL高可用之MHA搭建

    测试环境 节点1 172.16.200.231 6666               master         节点2 172.16.200.27 6666 slave1              ...

  2. iOS学习之沙盒

    1.iOS沙盒 iOS应用程序只能在为该改程序创建的文件系统中读取文件,不可以去其它地方访问,此区域被成为沙盒,所以所有的非代码文件都要保存在此,例如图像,图标,声音,映像,属性列表,文本文件等. 1 ...

  3. 转载--JAVA读取文件最佳实践

    1.  前言 Java应用中很常见的一个问题,如何读取jar/war包内和所在路径的配置文件,不同的人根据不同的实践总结出了不同的方案,但其他人应用却会因为环境等的差异发现各种问题,本文则从原理上解释 ...

  4. 对编写html代码的几点儿小建议

    1.DOCTYPE说明:告诉浏览器要使用哪种规范来解释该文档内容: <!DOCTYPE html PUBLIC "-W3//DTD//XHTML 1.0  Transitional// ...

  5. 从零开始学习Node.js例子七 发送HTTP客户端请求并显示响应结果

    wget.js:发送HTTP客户端请求并显示响应的各种结果 options对象描述了将要发出的请求.data事件在数据到达时被触发,error事件在发生错误时被触发.HTTP请求中的数据格式通过MIM ...

  6. JSBinding+SharpKit / 菜单介绍

  7. lua加载动态库缺乏相应的系统库

    错误信息: 使用lua测试lm2动态库时,加载时出现如下错误 jfyuan@jfy11-B85M-D2V:~/temp/service/soft/code/ginger_resty/cores/lm2 ...

  8. 使用MVC和EF,在保存数据的时候报错:System.Data.Entity.Validation.DbEntityValidationException: 对一个或多个实体的验证失败。有关详细信息,请参阅“EntityValidationErrors”属性。

    public UserInfo Create(UserInfo entity) { try { context.UserInfoes.Add(entity); context.SaveChanges( ...

  9. java空指针异常 for循环时,使用了值为null的变量

    错误代码: for(Map<String,Object> videoItemMap:learnVideoList){ String videoStuId=MapUtils.getStrin ...

  10. Durid(一): 原理架构

    Durid是在2013年底开源出来的,当前最新版本0.9.2, 主要解决的是对实时数据以及较近时间的历史数据的多维查询提供高并发(多用户),低延时,高可靠性的问题.对比Druid与其他解决方案,Kyl ...