我需要一个显示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>
答案 0 :(得分：1)
在css中为所有div使用 float:left 。也可以添加一个类并将所有css传递给该类。而不是内联css。
此外，如果您不需要位置，只需将其与右侧和底部css一起移除。
答案 1 :(得分：1)
尝试将float:left添加到您的div。
答案 2 :(得分：1)
请更改display:inline-block; to float:left.
对于某些css基础知识，您可以尝试使用此网站enter link description here
答案 3 :(得分：1)
尝试添加代码float:left，如下所示
<强> CSS：
div{
float:left;
}<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="https://www.w3schools.com/html/pulpitrock.jpg" 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="https://www.w3schools.com/html/pulpitrock.jpg" 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="https://www.w3schools.com/html/pulpitrock.jpg" 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="https://www.w3schools.com/html/pulpitrock.jpg" 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 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="https://www.w3schools.com/html/pulpitrock.jpg" 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>
答案 4 :(得分：1)
您可以添加此css
{{1}}
答案 5 :(得分：1)
请从@ids,ids删除内联属性display:block并使用flexbox。
事实上，最好将所有CSS与HTML分开。
#bootmPanel#bootmPanel{
display:flex;
}