css - 当内容不同时，一排设置大小的 div 不对齐

Question

我有 3 个 div，都设置了高度和宽度。middel 有一条额外的线，但它仍然在父 div 的 250px 内。然而，它会导致两侧的两个 div 向下移动一点。有人可以解释为什么要这样做，以便我可以理解前进吗？

<div id="eventListBox">

    <div class="eventListItemBox"> 
        <img src="./icons/bluedude.png" />
        <h1>Test Item 1</h1>
        <h2>Jan 6th, 2012</h2>
        <h2>5/11</h2>
    </div>


    <div class="eventListItemBox"> 
        <img src="./icons/cookies.png" />
        <h1>Very long title to cause wrap on line</h1>
        <h2>Jan 15th, 2012</h2>
        <h2>2/9</h2>
    </div>


    <div class="eventListItemBox"> 
        <img src="./icons/cookies.png" />
        <h1>Test item 3</h1>
        <h2>Jan 15th, 2012</h2>
        <h2>2/9</h2>
    </div>


</div>

CSS：

#eventListBox{
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: 150px;
    left: 75px;
    right: 75px;
    text-align: center;
    background-color: rgba(0,0,0,0.25);
}

.eventListItemBox{
    display: inline-block;
    margin: 0px;
    padding: 0px;
    width: 250px;
    height: 250px;
    background-color: rgba(0,0,0,0.25);
}

.eventListItemBox h1{
    margin: 0px;
    padding: 0px;
    font-size: 1.5em;
    font-weight: normal;
}

.eventListItemBox h2{
    margin: 0px;
    padding: 0px;
    font-size: 1.2em;
    font-weight: normal;
}

Answer 1

由于您的 div 是内联显示的，因此您的框对齐不均匀，因此需要“告诉”它们如何在行框中垂直对齐，您可以使用该vertical-align属性来做到这一点。默认情况下，所有内联元素的vertical-align值为baseline，这就是为什么你的左右 div 都粘在底部的原因，所以要解决这个问题，你需要告诉它们粘在顶部，正确对齐所有 div，你可以通过覆盖默认vertical-align值并将其设置为 来做到这一点top，如下所示：

CSS

.eventListItemBox {
    vertical-align:top;
}

您可以在本文中找到关于为什么会发生这种情况的更详细解释（带有示例）。