TA的每日心情 | 无聊 2019-6-2 14:11 |
---|
签到天数: 4 天 [LV.2]圆转纯熟
|
废话不多说 帖代码
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错位内容请搜索咔叽论坛以前的文章或继续浏览下面的相关文章,希望大家以后多多支持咔叽论坛!
原文地址:https://www.jb51.net/css/743214.html |
|