[英]Why does this inline-block element have content that is not vertically aligned
[英]Why Does inline block element of same height & width do not align vertically itself
为什么内联块元素不能在垂直顶部本身对齐? 如果我在所有块中都有相同的内容,那很好,但如果将内容减少到一个,就失去了对齐性。 在代码中-定义了para1&css类的四个div。 第2、3和4格都可以,但是第1格移到下方,因为内容较少。 我可以使用位置或使用float来确定它,但需要了解为什么会这样?
.para1 { width: 24%; height: 200px; border: 2px solid red; display: inline-block; }
<div> <div class="para1"> <p>Cras fringilla malesuada sem, et aliquam ligula tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p> </div> <div class="para1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. Cras fringilla malesuada sem, et aliquam ligula tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p> </div> <div class="para1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. Cras fringilla malesuada sem, et aliquam ligula tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p> </div> <div class="para1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. Cras fringilla malesuada sem, et aliquam ligula tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p> </div> </div>
因为内联元素的默认垂直对齐方式是baseline
。 将其更改为类似middle
或top
,它们按照我认为的要求对齐。
.para1 { width: 24%; height: 200px; border: 2px solid red; display: inline-block; vertical-align: top; }
<div> <div class="para1"> <p>Cras fringilla malesuada sem, et aliquam ligula tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. </p> </div> <div class="para1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. Cras fringilla malesuada sem, et aliquam ligula tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p> </div> <div class="para1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. Cras fringilla malesuada sem, et aliquam ligula tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p> </div> <div class="para1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. Cras fringilla malesuada sem, et aliquam ligula tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.