css总结 -使用display:inline-block,出现元素高度错位
在进行页面布局时发现一个问题,两个相同高度的元素显示高度不一致,发生错位。
- <style>
- .left{
- display:inline-block;
- height:110px;
- width:110px;
- }
- .right{
- display:inline-block;
- height:110px;
- width:110px;
- }
- </style>
- <div class='container'>
- <div class="left"></div>
- <div class="right"></div>
- </div>
调整方法,就是为他们指定基准线
- <style>
- .left{
- display:inline-block;
- height:110px;
- width:110px;
- vertical-align:top
- }
- .right{
- display:inline-block;
- height:110px;
- width:110px;
- vertical-align:top
- }
- </style>
- <div class='container'>
- <div class="left"></div>
- <div class="right"></div>
- </div>
其实为其中一项指定基准线即可,
css总结 -使用display:inline-block,出现元素高度错位的更多相关文章
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...
- 理解display:inline、block、inline-block
要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...
- HTML5 display:inline、block、inline-block的区别--备用
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别(转)
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block区别
display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...
- display:inline、block、inline-block的区别(摘抄)
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- display:inline、block、inline-block三者之间的区别
1. display:block就是将元素显示为块级元素. block元素的特点: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度:(<d ...
- display:inline、block、inline-block的区别 摘】
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
随机推荐
- shell脚本 server httpd 控制程序
原版的脚本里 查看status 需要用 lynx这个命令,还要开启http://localhost:80/server-status 比较麻烦,我直接注释了,新加的代码用红色字体 ...
- Iperf 网络性能测试
1.iperf安装 1.1将iperf_PC.rar工具解压放在默认的盘目录下即可,无需安装 1.2安装iperf for android 2.06.apk"到手机端. adb instal ...
- 花 1 小时,开源设计 LoRa 继电器开关
提示1:锐米所有 LoRa 产品严格遵循国标标准的 LoRaWAN 协议. 提示2:您可以免费复制,修改和商用本项目,请注明锐米原创. 提示3:如果您有其他 LoRa 需求或建议,欢迎联系锐米 sup ...
- openlayers6实现webgl点图层渲染效果(附源码下载)
前言:openlayers6推出来的有一段时间,推出来的新特性见:https://github.com/openlayers/openlayers/releases/该版本的主要功能是能够组合具有不同 ...
- smartforms设置表格脚标在最后一页显示
用户打印采购订单时,末尾计算一个合计金额,但是有多页时,合计显示在了每一页,现在希望合计项只显示在表格最后一行就可以. smartforms调整表格,将总计放在脚标内,设置脚标输出打印[在表结束处]即 ...
- linux 内核模块开发相关的文章搜集和模块开发过程中的小技巧
最近需要开发一些内核模块,进行探究linux内核的一些特征,现在把一些遇到的比较好的文章和知识点,进行简要记录和备忘: 内核模块开发相关链接: https://www.thegeekstuff.com ...
- 插入数据失败提示: Setting autocommit to false on JDBC Connection 自动提交失败
来源:https://blog.csdn.net/qq_42799475/article/details/102742109 今天在执行mybstis的测试时,明明已经写好了插入语句但是数据库没有插入 ...
- U盘装系统/win to go制作笔记
//添加图片太麻烦了吧,我扔相册里了,需要自取吧. //U盘装系统 环境:win10戴尔灵越台式机 硬件:16G U盘,Windows电脑 软件:老毛桃启动装机工具,win10镜像1803版本 进入网 ...
- SDI011 读卡器自动发送00A4选择指令 解决方法
如标题,SDI读卡器会自动发送 004A的应用选择指令 解决方法: 是Certificate Propagation 服务 弄的, 关闭就好了
- adams技巧汇总
T+左键 平动模型 R+左键 旋转模型 Z+左键 动态缩放 F或Ctrl+F 以最大比例全面显示模型 S+左键 沿着垂直于屏幕的轴线旋转 ...