當它們的內容不同時，一排設置大小的div不對齊

Question

我有3個div，所有的高度和寬度都是設置的。 middel有一個額外的線，但它仍然在父div的250px內。然而，這導致兩邊的兩個分部稍微下降。有人可以解釋爲什麼它這樣做，所以我可以理解前進嗎？

<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; 
} 

你可以找到一個更詳細的解釋，爲什麼出現這種情況（舉例）在this文章。