多个div在同一行显示不整齐

最新推荐文章于 2024-07-09 23:24:46 发布

︶ㄣ洳影隨形しovё

最新推荐文章于 2024-07-09 23:24:46 发布

阅读量319

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_43907534/article/details/108484869

版权

解决办法 : 给父div 下的子div 添加属性 vertical-align: top;

参考:https://blog.csdn.net/kirinlau/article/details/82907971

如下图
在这里插入图片描述
解决办法

.bottom_explain_item {
            width: 12%;
            height: inherit;
            text-align: center;
            padding: 5px 0px;
            display: inline-block;
            background-color: blueviolet;
            color: #C6C6C6;
            vertical-align: top;
 }

代码

<div class="bottom_explain">
                <div class="bottom_explain_item"></div>
                <div class="bottom_explain_item">
                    <span class="explain_title">平台赋码</span>
                    <!-- <h2 class="explain_title">平台赋码</h2> -->
                    <p class="explain_con">平台接收后，产生项目代码，短信和邮件通知到申报人</p>
                </div>
                <div class="bottom_explain_item">
                    <h2 class="explain_title">并联办理</h2>
                    <p class="explain_con">各部门根据申报人报送的材料进行业务办理，并将项目进度实时通过平台告知申报人。</p>
                </div>
                <div class="bottom_explain_item"></div>
                <div class="bottom_explain_item">
                    <h2 class="explain_title">项目监管</h2>
                    <p class="explain_con">监管单位对项目的开工报告，项目年报，竣工报告进行审查</p>
                </div>
                <div class="bottom_explain_item"></div>
                <div class="bottom_explain_item"></div>
                <div class="bottom_explain_item"></div>
</div>