如何正确地将divs并排放置而不包裹？

Question

我理解您可以使用内联块来让div彼此相邻，并且您可以在父级上使用nowrap以确保它们不会换行。我的问题是将任何div放入其中会使下面的div压低。我已经创建了一个jsfiddle来显示问题：

http://jsfiddle.net/MMtNQ/2/

html的要点是：

<div class="wrapper">
    <div class="side-by-side">
        <div>Text here</div>
        <div>Text here</div>
    </div>
    <div class="side-by-side">
        <div>Text here</div>
    </div>
</div>

你可以看到div被向下调整，因为我在第一个中有div。如何让它们全部与顶部对齐？

Answer 1

将vertical-align: top;添加到.side-by-side定义

.side-by-side {
    display: inline-block;
    width: 300px;
    height: 300px;
    background-color: #e6e6e6;
    margin-right: 10px;
    vertical-align: top;
}

Here's a fiddle