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