두 개의 인라인 블록 div를 내용으로 정렬하십시오.

Question

두 개의 인라인 블록 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 요소를 사용하는 대신에 당신은 또한 래퍼에서 서로 옆에 정렬됩니다, 모두 왼쪽 그들에게 떠 있습니다

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

FIDDLE

Answer 2

vertical-align: top을 설정 baseline으로 설정됩니다.

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