CSS解决inline-block的错位问题
发布时间:2020-09-01 15:52:42 作者:katr1na 我要评论
这篇文章主要介绍了CSS解决inline-block的错位问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
废话不多说 帖代码
html部分
<div class="positionleft">我是position方式的左边,占30%</div> <div class="positionright">我是position方式的右边,占70%</div>
css部分
.positionleft { position: relative; display: inline-block; background-color: #8d8d8d; width: 30%; height: 20%; } .positionright { position: relative; display: inline-block; left: 0; background-color: #ff8888; width: 70%; height: 20%; }
显示效果
可以很明显的发现两个div块出现了错位,查阅资料发现是两个inline-block在中间有空格时会出现这样的现象
修改html代码如下
<div class="positionleft">我是position方式的左边,占30%</div> <div class="positionright">我是position方式的右边,占70% </div>
仅仅是删除了两个div之间的空格 我们查看一下效果
显示效果
问题解决
各位在使用文档格式化工具如prettier时出现这种问题要注意
总结
到此这篇关于CSS解决inline-block的错位问题的文章就介绍到这了,更多相关css inline-block错位内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章
css之display属性之inline-block布局实现详解
今天学习css样式的时候发现很多网站都是用css的display:inline-block这个属性,这里刚好有篇特别好的解释,特分享一下2020-03-21- 这篇文章主要介绍了详解css中inline-block的最小宽度值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起2019-12-09
- 这篇文章主要介绍了详解CSS 去掉inline-block元素间隙的几种方法,这些间隙会导致一些布局上的问题,需要把间隙去掉。非常具有实用价值,需要的朋友可以参考下2018-11-13
- 这篇文章主要介绍了css几种解决inline-block间隙的方案(整理),具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-08-16
css解决display:inline-block;产生的缝隙(间隙)的方法
本篇文章主要介绍了css解决display:inline-block;产生的缝隙(间隙)的方法,具有一定的参考价值,有需要的可以了解一下。2016-12-14- 这篇文章主要介绍了兼容浏览器的inline-block,需要的朋友可以参考下2016-02-17
深入解析CSS的display:inline-block属性的使用
这篇文章主要介绍了CSS的display:inline-block属性的使用,其中对使用时产生的空隙问题的解决作了重点讲解,需要的朋友可以参考下2015-11-09- 这篇文章主要介绍了CSS中使用inline-block来进行居中的示例,使用的时候注意一下容器的宽度,需要的朋友可以参考下2015-07-15
最新评论