HTML div 垂直位置问题

标签 html css

我需要在同一行中显示一个包含一些内容的div,下面是代码,它工作正常但是当文本长度较大时最后一个div的垂直位置向上移动,我需要每个div正确对齐.

<div id="bootmPanel" style=" box-shadow: 0px 0px 12px rgba(255,255,255,0.7);border: 0px solid rgba(244,244,244,0.7); position: absolute;right:0; bottom: 0;display:block;background-color:rgba(52,47,52,.7);width:100%;height:200px" >


    <div style="padding:5px;width:105px;height:130px;border:1px solid rgba(244,244,244,1);margin-top: 10px;margin-left: 10px; display:inline-block;">
    <img src="images/icon/alert.png" width=70px; height:30; alt="Alert" style="margin-top: 5px;margin-left: 10px;">
    <p> <span style="color:white;font-size:12px;display:block;width:95px;word-wrap:break-word;">Images can improve the design </span> </p>
    </div>

     <div style="padding:5px;width:105px;height:130px;border:1px solid rgba(244,244,244,1);margin-top: 10px;margin-left: 10px; display:inline-block;">
    <img src="images/icon/alert.png" width=70px; height:30; alt="Alert" style="margin-top: 5px;margin-left: 10px;">
    <p> <span style="color:white;font-size:12px;display:block;width:95px;word-wrap:break-word;">Images can improve the design </span> </p>
    </div>

     <div style="padding:5px;width:105px;height:130px;border:1px solid rgba(244,244,244,1);margin-top: 10px;margin-left: 10px; display:inline-block;">
    <img src="images/icon/alert.png" width=70px; height:30; alt="Alert" style="margin-top: 5px;margin-left: 10px;">
    <p> <span style="color:white;font-size:12px;display:block;width:95px;word-wrap:break-word;">Images can improve the design </span> </p>
    </div>

     <div style="padding:5px;width:105px;height:130px;border:1px solid rgba(244,244,244,1);margin-top: 10px;margin-left: 10px; display:inline-block;">
    <img src="images/icon/alert.png" width=70px; height:30; alt="Alert" style="margin-top: 5px;margin-left: 10px;">
    <p> <span style="color:white;font-size:12px;display:block;width:95px;word-wrap:break-word;">Images can improve the design Images can improve the design </span> </p>
    </div>



   </div>   

最佳答案

尝试将 float:left 添加到您的 div。

关于HTML div 垂直位置问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48703746/

相关文章:

javascript - 如何创建一个使用随机生成的间隔调用函数的连续循环

html - Bootstrap 4 无法更改导航栏元素的颜色?

CSS – border-bottom 属性上的多种颜色

html - ASP.NET 显示的图标不同于 HTML/CSS

jquery - 固定位置模态滚动/焦点

javascript - 在表单提交按钮上呈现圆 Angular 的方法

javascript - Jquery slideToggle 弄乱了 flex 对齐,直到它完成

html - 防止在 Zurb Foundation 中调整网格大小

html - 使用 Bootstrap 显示输入和标签同一行

javascript - 如何来回制作(绳索) "swing"的图像?