CSS处●▂●理inline

日期:2021-01-20 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

空话很少说 帖编码

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%;
       }

显示信息实际效果


 

能够很显著的发觉2个div块出現了移位,查看材料发觉是2个inline-block先在间有时间格时候出現那样的状况

改动html编码以下

<div class="positionleft">我是position方法的左侧,占30%</div> <div class="positionright">我是position方法的右侧,占70%
</div>

只是是删掉了2个div中间的空格符 大家查询一下实际效果
显示信息实际效果

 

难题处理

诸位在应用文本文档文件格式化工厂具如prettier时出現这类难题要留意

小结

到此这篇有关CSS处理inline-block的移位难题的文章内容就详细介绍到这了,大量有关css inline-block移位內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!