1

次のdivのレイアウトが必要です。

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

私は一生懸命検索しましたが、divを2つの列に配置することに関する多くの同様の質問が見つかりました（thisとthisのように）。この正確な問題に対処しているようには見えません。

float:leftとを使ってみましclear:bothたが、どこにも行けません。

明らかに、テーブルを使用して実現できますが、レイアウトにテーブルを使用するのは悪い習慣ではありません。なくてもできる？

4

3 に答える 3

2

これはうまくいくはずです

<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>
于 2013-01-22T10:15:35.660 に答える
1

それらがその順序である必要がない場合、これは機能するはずです：

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/

于 2013-01-22T10:18:40.483 に答える
1 
<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/

于 2013-01-22T10:19:23.217 に答える