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，出现元素高度错位相关推荐

[CSS]详解display:inline | block |inline-block的区别
2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...
[DIV+CSS应用]澄清display:inline;与float:left;的用途
首先我们要明确,display:inline;与float:left;正确含义.display:inline;(内联)<CSS权威指南>中文字显示:任何不是块级元素的可见元素都是内联元素. ...
css中的display属性之li元素
li元素 li元素是一个块级元素,display值默认为 block 当我们把display值改为inline后,li元素以水平菜单的样式显示补充:display与 visibility属性不同, ...
display:inline、block、inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
display:inline、block、inline-block的区别以及该死的ie6兼容问题
2019独角兽企业重金招聘Python工程师标准>>> display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
CSS基础(part5)--display
学习笔记,仅供参考,有错必纠文章目录 CSS 标签的类型(显示模式) 块元素行元素行内块元素三种模式的区别和联系 display改变标签显示模式 CSS 标签的类型(显示模式) HTML标记一 ...
display:inline的用法
<div> DIV1 </div> <div> DIV2 </div> 这里DIV1和DIV2分别占一行,但是你给他们加上属性后变了 <div ...
《三》CSS 中的 display 属性
display 属性可以设置元素的外部和内部显示类型.元素的外部显示类型将决定该元素在流式布局中的表现(块级或行内元素):元素的内部显示类型可以控制其子元素的布局(flex.grid 等). 块级元素 ...

css总结 -使用display：inline-block，出现元素高度错位

css总结 -使用display：inline-block，出现元素高度错位相关推荐

最新文章

热门文章