盒inline-block的不對齊

Question

我試圖把兩個箱（DIV）一邊到另一邊，我注意到他們得到錯位時，一個包含文本，另一個是空的（在我的情況下，它包含）

HTML

<table> 
    <tr> 
     <td align="center"> 
      <div id="tab2">1</div> 
      <div id="tab3"></div> 
     </td> 
    </tr> 
</table> 

CSS

#tab2, #tab3 { 
    width: 460px; 
    min-height: 300px; 
    display: inline-block; 
    border: #BCC6CC 2px solid; 
} 

Codepen link

Answer 1

您好，請用vertical-align: top;，使他們在一條線垂直對齊

#tab2, #tab3 { 
    width:460px; 
    min-height:300px; 
    display:inline-block; 
    border:#BCC6CC 2px solid; 
    vertical-align: top; 
} 

CODEPEN

Answer 2

與@SzymonDziewoński同意，你也可以使用這個

#tab2, #tab3 { 
    width:460px; 
    min-height:300px; 
    display:inline-block; 
    border:#BCC6CC 2px solid; 
    float: left; 
    margin-left: 5px; 
}