html - フロートを使用せずにディスプレイを使用してこの構造を構築する方法

Question

このレイアウトに使用する必要がある html と css は何ですか (フロートを使用したくないと考えて、ディスプレイを使用したいと考えてください)。

Answer 1

次の 3 つのオプションがあります。

1. テーブルを使用して、必要に応じて構造化します - 2 つの行と 1 つの列 (rowspan="2" を使用)
2. 3 つのブロックすべてを絶対位置に配置する
3. フロートを使用する

最良かつ簡単な方法は、フロートを使用することです。

Answer 2

この方法はもっと手間がかかると思いますが、うまくいきます：

http://jsfiddle.net/Mg37W/

HTML:

<div class="left">
    <div class="one">
    </div>
    <div class="two">
    </div>
</div>
<div class="right">
</div>

CSS:

.left {
    display: inline-block;
    width: 320px;
    height: 400px;
    border: 1px solid blue;
}

.right {
    display: inline-block;
    width: 100px;
    height: 300px;
    background: red;
    border: 1px solid green;
    vertical-align: top;
}

.one, .two {
    width: 300px;
    height: 100px;
    margin-bottom: 20px;
    background: brown;
}