Question

我需要以下div的布局：

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

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

我尝试过使用float:left和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/

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

3 个答案: