0

インライン ブロックを使用して 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 が下方に調整されていることがわかります。それらをすべて上に揃えるにはどうすればよいですか？

4

1 に答える 1

5

定義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;
}

ここにフィドルがあります。

于 2013-02-12T18:05:27.560 に答える