Html 如何在不使用表格的情况下将三个div放在两列中？

我需要以下分区布局：

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

我很努力地搜索，但我所发现的都是关于在两列中放置div的类似问题（如和）。似乎没有人能解决这个问题

我试过使用

float:left

和

clear:两者都

，但我哪儿也去不了

显然，使用表是可以实现的，但是使用表进行布局不是很糟糕吗。没有它能完成吗？

这应该可以

<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>

这应该行得通

<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>

---

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

HTML

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

---

jsFIDLE-

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

HTML

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

JSFIDLE-

一些内容
更多内容
更多内容

一些内容
更多内容
更多内容

---

谢谢。一开始我没有工作，因为我在潜水艇上有边界。但是，当我将宽度减少到45%时，它看起来恰到好处。当你有填充物、边距或边框时，千万不要试图以百分比来猜测容器的最佳宽度。它可以在浏览器中正常工作，您可以对其进行优化，但很可能会打断其他浏览器。IE7和IE8在这方面有着众所周知的缺陷。相反，如果需要，添加具有边框和填充的内部DIV标记，并将包装器/容器保留为50%，边框/填充/边距=0谢谢。一开始我没有工作，因为我在潜水艇上有边界。但是，当我将宽度减少到45%时，它看起来恰到好处。当你有填充物、边距或边框时，千万不要试图以百分比来猜测容器的最佳宽度。它可以在浏览器中正常工作，您可以对其进行优化，但很可能会打断其他浏览器。IE7和IE8在这方面有着众所周知的缺陷。相反，如果需要，添加具有边框和填充的内部DIV标记，并将包装器/容器保留为50%，边框/填充/边距=0