今天做了两个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. css3简单介绍

    关于css3我先介绍几个简单的选择器: 先进行设置: 字符串匹配属性选择器: E[alt^="a"]  选择属性中以a开头的元素: E[alt$="a"]  选 ...

  2. flexslider

    flexslider是一个出色的jquery滑动切换插件,支持主流浏览器,并有淡入淡出效果.适合初级和高级网页设计师. 查询了网上资料  总结一下flexslider属性 $(function(){ ...

  3. windows核心编程---第四章 进程

    上一章介绍了内核对象,这一节开始就要不断接触各种内核对象了.首先要给大家介绍的是进程内核对象.进程大家都不陌生,它是资源和分配的基本单位,而进程内核对象就是与进程相关联的一个数据结构.操作系统内核通过 ...

  4. Python OpenCV —— Modifying

    一些索引和修改图像像素点数据等的操作,可打印观察运行结果. # -*- coding: utf-8 -*- """ Created on Wed Sep 28 00:11 ...

  5. cocos2dx 3.0 之 lua 创建类

    利用3.0里面封装好的模板类来写,不罗嗦,直接上例子(消除星星小游戏中 星星类) require "extern" StarSprite = class("StarSpr ...

  6. 标准库中的-stack

    #include <sequence_concepts.h> __STL_BEGIN_NAMESPACE // Forward declarations of operators == a ...

  7. D - 蜘蛛牌

    Time Limit:5000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status Pract ...

  8. Spark 个人实战系列(2)--Spark 服务脚本分析

    前言: spark最近非常的火热, 本文不讲spark原理, 而是研究spark集群搭建和服务的脚本是如何编写的, 管中窥豹, 希望从运行脚本的角度去理解spark集群. 研究的spark为1.0.1 ...

  9. UVa 679 小球下落

    题意:这道题规律性极强,虽然是二叉树,但是可以用模拟来写. 1<<20 意思是1的二进制左移20位,即2的20次方. 对于二叉树中一个节点 k ,其左节点,右节点的编号分别是2k 和 2k ...

  10. 加速你的py.test, pytest-dist

    URL: https://pypi.python.org/pypi/pytest-xdist 多线程跑测试 Command: py.test -d --tx 3*popen