html - 如何在不使用浮动的情况下使用显示器构建此结构

Question

我应该为这个布局使用什么 html 和 css （考虑我不想使用浮动，并且想要使用显示）。

Answer 1

你可以有三个选择：

1. 使用表格以您想要的方式构建它 - 两行一列（rowspan =“2”）
2. 将所有三个块定位在绝对位置
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;
}