內聯框未對齊的框

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鏈接

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