html - 如何在不使用表格的情况下在两列中布置三个 div？

Question

我需要以下 div 布局：

+-----------+-----------+
|           |           |
|   Div A   |           |
|           |           |
|           |           |
+-----------+   Div C   |
|           |           |
|    Div B  |           |
|           |           |
|           |           |
+-----------+-----------+

我努力搜索，但我发现很多关于将 div 放在两列中的类似问题（如this和this）。似乎没有人处理这个确切的问题。

我已经尝试使用float:leftand clear:both，但我无法到达任何地方。

显然它可以使用表格来实现，但是使用表格进行布局不是坏习惯。可以不做吗？

Answer 1

这应该工作

<div style="width:100%">
<div id="topLeft" style="float:left; width:50%; height:200px">
</div>
<div id=topRight style="float:right; width:50%; height:400px">
</div>
<div id="bottomLeft" style="float:left; width:50%; width:200px">
</div>
</div>

Answer 2

如果它们不必按该顺序排列，则应该可以：

HTML

<div id="container">    
    <div id="div3"></div>
    <div id="div1"></div>
    <div id="div2"></div>
</div>

CSS

#container {
    width:200px;
}

#div1, #div2 {
    width: 100px;
    height: 100px;
    float: left;
    clear: left;
}

#div3 {
    height: 200px;
    width: 100px;
    float: right;
}

#div1 {
    background-color: red;
}

#div2 {
    background-color: blue;
}

#div3 {
    background-color: green;
}

jsfiddle - http://jsfiddle.net/3UTcP/

Answer 3

<div>
    <div id="AB-Wrapper" style="float:left;width:50%;">
        <div id="DivA">some content</div>
        <div id="DivB">some more content</div>
    </div>
    <div id="DivC" style="float:right;width:50%;">even more content</div>
    <div style="clear:both;"><!-- clearer --></div>
</div>

http://jsfiddle.net/xREQK/