Css 一排固定大小的div don'；当它们的内容不同时，不能对齐

我有三个div，都有一个固定的高度和宽度。中间的一个有一条额外的线，但它仍然在父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>

---

由于您的div以内联方式显示，因此方框没有均匀对齐，因此需要“告知”如何在行方框内垂直对齐，这可以通过使用

垂直对齐

属性来实现。默认情况下，所有内联元素都有一个

垂直对齐

值

基线

，这就是为什么您的右div和左div都粘在底部，所以要解决这个问题，您需要告诉它们粘在顶部，正确对齐所有div，您可以通过覆盖默认的

垂直对齐

值并将其设置为

顶部

，如下所示：

CSS

.eventListItemBox {
    vertical-align:top;
}

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

.eventListItemBox {
    vertical-align:top;
}