將兩個內嵌塊div與內容對齊

Question

我有兩個內嵌塊div，每個div的寬度爲其父級的50％，並且它們正確顯示爲彼此相鄰。但是，當我添加一個鏈接到這些div之一，有一個在第二個div

<div class="wrap"> 
    <div class="resizable resizable1"> 
    <a href="#" class="link1">link1</a> 
    <a href="#" class="link2">link2</a> 
    </div><!-- 
    --><div class="resizable resizable2">second</div> 
</div> 

.wrap { 
    width: 100%; 
    font-size: 0; 
} 
.resizable { 
    width: 50%; 
    height: 120px; 
    background-color: coral; 
    display: inline-block; 
} 
.resizable2 { 
    background-color: lightblue; 
} 
.resizable a { 
    font-size: 12px; 
} 

的jsfiddle例如http://jsfiddle.net/KyEr3/455/

如何對準兩個div頂部的差距？

Answer 1

當使用默認display: inline-block元素被設置爲baseline，而不是設置vertical-align: top

.resizable { 
     width: 50%; 
     height: 120px; 
     background-color: coral; 
     display: inline-block; 
     vertical-align: top; 
} 

FIDDLE

Answer 2

您也可以浮動他們倆離開了，他們在包裝彼此相鄰將調整。

.wrap { 
    width: 100%; 
    font-size: 0; 
} 
.resizable { 
    width: 50%; 
    height: 120px; 
    background-color: coral; 
    display: inline-block; 
    float:left; 
} 
.resizable2 { 
    background-color: lightblue; 
    float:left; 
} 
.resizable a { 
    font-size: 12px; 
}