div與較小的列表是較低的頁面 - CSS/HTML

Question

我想使兩個div，每個包含一個標題和一個列表，彼此相鄰。但是，如果一個表比其他規模較小的，然後用小名單的股利是在網頁上較低：

這是div的代碼：

<div id='classes' class="profileList"> 
    <h2 class="title">Classes</h2> 
    <ul> 
     <li>Soldier</li> 
     <li>Sniper</li> 
     <li>Spy</li> 
    </ul> 
</div><div id="divisions" class="profileList"> 
    <h2 class="title">Divisions</h2> 
    <ul> 
     <li>Steel</li> 
     <li>Silver</li> 
    </ul> 
</div> 

（年底左邊一個，右邊一個開始緊挨着對方，因爲另有50％的div寬度不把相鄰的div）

這是CSS：

.title { 
    position: relative; 
    text-align: center; 
    padding-top: 0; 
    margin-top: 0; 
    text-shadow: #FAD2AF 0 0 6px; 
} 

.profileList { 
    display: inline-block; 
    width: 50%; 
} 

爲什麼當元素不相等時，這些div在不同的高度上？我該如何解決它？

Answer 1

變化.profileList這樣：

.profileList { 
    display: inline-block; 
    width: 50%; 
    vertical-align:top; 
} 

當您使用inline-block，你需要給它所需的垂直對齊，因爲默認爲baseline