Question

我有一些看起来像这样的HTML：

<div style="display:inline-block;">
<h2>Heading 1</h2>
<table>
<tr><td>Some rows and data cells</td></tr>
</table>

<h2>Heading 2</h2>
<table>
<tr><td>Some more rows and data cells</td></tr>
</table>
</div>

<div style="display:inline-block;">
<h2>Heading 3</h2>
<table>
<tr><td>Last lot of rows and data cells</td></tr>
</table>
</div>

这是为了使第三个表格和标题出现在另外两个的右侧，它们位于彼此的顶部，因此基本上有两列，左边是前两个标题/表格，右边第三个标题/表格。问题是，这个代码在使用时有第三个标题与第二个标题对齐，第三个表格在第二个标题下方延伸。第三个标题应该与第一个标题一致，或者至少第二个div中的信息应该以这样的方式居中，即以第一个div中的信息为中心。

问题1：为什么第二个div的内容与第二个标题的顶部对齐而不是第一个div的顶部，并且

问题2：如何使div正确对齐（并且不建议浮动）？

小提琴：http://jsfiddle.net/L9d0Logh/

Answer 1

使用vertical-align: top;也可以删除内联元素之间的空白区域，因此块之间不会有间隙。

＆＃13;

.wrapper {
    display: inline-block;
    vertical-align: top;
}

＆＃13;

    <div class='wrapper'>
    <h2>Heading 1</h2>
    <table>
    <tr><td>Some rows and data cells</td></tr>
    </table>
  
    <h2>Heading 2</h2>
    <table>
    <tr><td>Some more rows and data cells</td></tr>
    </table>
    </div><!--
    
    --><div class='wrapper'>
    <h2>Heading 3</h2>
    <table>
    <tr><td>Last lot of rows and data cells</td></tr>
    </table>
    </div>

＆＃13;

Answer 2

您可以将vertical-align: top;添加到div。

内联块元素不排队

2 个答案: