为什么具有相同高度和宽度的嵌入式块元素自身未垂直对齐
[英]Why Does inline block element of same height & width do not align vertically itself
问题描述
Why do inline-block elements not align on vertical top itself? 
为什么内联块元素不能在垂直顶部本身对齐？ If I have same content in all the blocks it is good, but Ii reduce content in one, it loses it alignment. 如果我在所有块中都有相同的内容，那很好，但如果将内容减少到一个，就失去了对齐性。 In the code - there are four divs with class para1 & css defined. 在代码中-定义了para1＆css类的四个div。 2nd, 3rd & 4th div are ok, but 1st is moved below, as content is less in it. 第2、3和4格都可以，但是第1格移到下方，因为内容较少。 I can get it ok with position or using float but need to understand why it is like this? 我可以使用位置或使用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>
1 个解决方案
解决方案1
3 2018-06-12 18:42:24
Because the default vertical alignment of inline elements is baseline . 因为内联元素的默认垂直对齐方式是baseline 。 Change it to something like middle or top and they align as I think you'd want them to. 将其更改为类似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.
相关问题
为什么这个内联块元素的内容不是垂直对齐的 - Why does this inline-block element have content that is not vertically aligned
将div中的嵌入式块垂直对齐并固定高度 - Vertically align an inline-block in a div with a fixed height
如何在`内部垂直对齐`inline-block`元素 <td> `元素？ - How to align vertically a `inline-block` element inside a `<td>` element?
为什么这些内联块元素会产生额外的宽度？ - Why does these inline-block element produce extra width?
垂直对齐块级元素，水平宽度为 90% - align block level element vertically with horizontal width 90%
使用inline-block和vertical-align：中间和顶部将父级内的子级与动态高度垂直对齐。 - Vertically align children inside parent with dynamic height, using inline-block and vertical-align: middle and top?
垂直对齐内联元素中的文本 - Vertically align text in an inline element
为什么内联块元素出现在内联元素下面？ 如何让它们出现在同一条线上？ - Why does the inline-block element appear below the inline element? How to make them appear on the same line?
为什么我的块元素的宽度和高度为0？ - Why is my block element's width and height 0?
display：inline-block和伪元素做垂直放置 - display:inline-block and pseudo-element to do Vertically placed
相关标签