在进行页面布局时发现一个问题,两个相同高度的元素显示高度不一致,发生错位。

  1.  
    <style>
  2.  
    .left{
  3.  
    display:inline-block;
  4.  
    height:110px;
  5.  
    width:110px;
  6.  
    }
  7.  
    .right{
  8.  
    display:inline-block;
  9.  
    height:110px;
  10.  
    width:110px;
  11.  
    }
  12.  
    </style>
  13.  
     
  14.  
    <div class='container'>
  15.  
    <div class="left"></div>
  16.  
    <div class="right"></div>
  17.  
    </div>

调整方法,就是为他们指定基准线

  1.  
    <style>
  2.  
    .left{
  3.  
    display:inline-block;
  4.  
    height:110px;
  5.  
    width:110px;
  6.  
    vertical-align:top
  7.  
    }
  8.  
    .right{
  9.  
    display:inline-block;
  10.  
    height:110px;
  11.  
    width:110px;
  12.  
    vertical-align:top
  13.  
    }
  14.  
    </style>
  15.  
     
  16.  
    <div class='container'>
  17.  
    <div class="left"></div>
  18.  
    <div class="right"></div>
  19.  
    </div>

其实为其中一项指定基准线即可,

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

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

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

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

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

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

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

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

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

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

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

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

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

  9. display:inline、block、inline-block的区别 摘】

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

随机推荐

  1. shell脚本 server httpd 控制程序

    原版的脚本里  查看status  需要用 lynx这个命令,还要开启http://localhost:80/server-status   比较麻烦,我直接注释了,新加的代码用红色字体       ...

  2. Iperf 网络性能测试

    1.iperf安装 1.1将iperf_PC.rar工具解压放在默认的盘目录下即可,无需安装 1.2安装iperf for android 2.06.apk"到手机端. adb instal ...

  3. 花 1 小时,开源设计 LoRa 继电器开关

    提示1:锐米所有 LoRa 产品严格遵循国标标准的 LoRaWAN 协议. 提示2:您可以免费复制,修改和商用本项目,请注明锐米原创. 提示3:如果您有其他 LoRa 需求或建议,欢迎联系锐米 sup ...

  4. openlayers6实现webgl点图层渲染效果(附源码下载)

    前言:openlayers6推出来的有一段时间,推出来的新特性见:https://github.com/openlayers/openlayers/releases/该版本的主要功能是能够组合具有不同 ...

  5. smartforms设置表格脚标在最后一页显示

    用户打印采购订单时,末尾计算一个合计金额,但是有多页时,合计显示在了每一页,现在希望合计项只显示在表格最后一行就可以. smartforms调整表格,将总计放在脚标内,设置脚标输出打印[在表结束处]即 ...

  6. linux 内核模块开发相关的文章搜集和模块开发过程中的小技巧

    最近需要开发一些内核模块,进行探究linux内核的一些特征,现在把一些遇到的比较好的文章和知识点,进行简要记录和备忘: 内核模块开发相关链接: https://www.thegeekstuff.com ...

  7. 插入数据失败提示: Setting autocommit to false on JDBC Connection 自动提交失败

    来源:https://blog.csdn.net/qq_42799475/article/details/102742109 今天在执行mybstis的测试时,明明已经写好了插入语句但是数据库没有插入 ...

  8. U盘装系统/win to go制作笔记

    //添加图片太麻烦了吧,我扔相册里了,需要自取吧. //U盘装系统 环境:win10戴尔灵越台式机 硬件:16G U盘,Windows电脑 软件:老毛桃启动装机工具,win10镜像1803版本 进入网 ...

  9. SDI011 读卡器自动发送00A4选择指令 解决方法

    如标题,SDI读卡器会自动发送 004A的应用选择指令 解决方法: 是Certificate Propagation 服务 弄的, 关闭就好了

  10. adams技巧汇总

    T+左键        平动模型 R+左键        旋转模型 Z+左键        动态缩放 F或Ctrl+F     以最大比例全面显示模型 S+左键        沿着垂直于屏幕的轴线旋转 ...