我怎样才能正确地让div并排而不包裹呢？

Question

我理解这样的想法，你可以使用内联块来让div彼此相邻，你可以在父级上使用nowrap来确保它们不会包装。我的问题是，将任何div放入这些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

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

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

Here's a fiddle。