html - 如何正确地让 div 并排放置而不进行包装？

Question

我理解您可以使用 inline-blocks 让 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;
}

这是一个小提琴。