html - 框内联 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