一行设置大小的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是在线显示的，因此他们需要“告诉”如何在一个线框中垂直对齐，你可以使用{ {1}}财产。默认情况下，所有内联元素的vertical-align值都为vertical-align，这就是为什么你的左右div都坚持到底部，所以为了解决这个问题，你需要告诉他们坚持到顶部要正确对齐所有div，可以通过覆盖默认的baseline值并将其设置为vertical-align来实现，如下所示：

<强> CSS

top

您可以在this文章中找到更详细的解释，说明为什么会这样（有示例）。