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

Question

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

<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 值为 baseline，这就是为什么左右 div 都粘在底部的原因，因此要解决此问题，您需要告诉他们坚持到顶部，正确对齐所有的 div，您可以通过覆盖默认的 vertical-align 值并将其设置为 top 来实现，例如所以:

CSS

.eventListItemBox {
    vertical-align:top;
}

您可以在 this 上找到关于为什么会发生这种情况的更详细解释(带示例)文章。