2

次の問題:

私は3つの部門を持っています。

<div id="div1"> </div>

<div id="div2"> </div>

<div id="div3"> </div>

そして、それらを次の順序で配置したいと思います。

DIV1 DIV2
DIV1 DIV2
DIV1 DIV2

.........DIV3
.........DIV3
.........DIV3

左側に 1 つの div、その下の右側に 2 つの div。最初の 2 つの div に float: left を指定すると、次のようになります。

DIV1 DIV2
DIV1 DIV2
DIV1 DIV2
DIV3
DIV3
DIV3

「クリア: 左; フロート: 右;」3番目のdivでこれを取得します:

DIV1 DIV2
DIV1 DIV2
DIV1 DIV2



................................... DIV3
... ...................................DIV3
................... ...................DIV3

div 3 はページの下部にあります。

最後の div を 2 番目の div の下に配置するにはどうすればよいですか?

甲斐

4

5 に答える 5

4

動作中のjsFiddleデモ

マークアップを変更します。div11 つの要素に追加しdiv2、div3別の要素に追加します。

<div class="left">
    <div id="div1">
        <p>DIV 1</p>
        <p>DIV 1</p>
        <p>DIV 1</p>
        <p>DIV 1</p>
    </div>
</div>

<div class="right">
    <div id="div2">
        <p>DIV 2</p>
        <p>DIV 2</p>
        <p>DIV 2</p>
        <p>DIV 2</p>
    </div>
    <div id="div3">
        <p>DIV 3</p>
        <p>DIV 3</p>
        <p>DIV 3</p>
        <p>DIV 3</p>
    </div>
</div>

次に、左右にフロートします。

.left {
    float: left;
    width: 50%;
}

.right {
    float: right;
    width: 50%;
}
于 2013-05-27T09:18:20.990 に答える
2

float と div を含む 2 列の jfiddle を試してみてください http://jsfiddle.net/AnFPa/1/

<div style="float: left;">
    <div>div1</div>
</div>
<div style="float: left;">
<div>div2</div>
<div>div3</div>
</div>
于 2013-05-27T09:26:37.637 に答える
1

clear left を使用してみてください:

<div 3 style="clear:left" ></div>

または、コンテナー内に両方の div を配置し、一番下の行を右にフロートさせることができます。

<div>
  <div id="1" style="float:left"></div>
  <div id="2" style="float:left"></div>
  <div style="clear:both"></div>
  <div id="3" style="float:right"></div>
</div>
于 2013-05-27T09:09:00.267 に答える
1 
<div id="div4">

<div id="div1"> </div>

<div id="div2"> </div>

<div id="div3"> </div>

</div>

div 4 に幅を与え、div 3 を右にフロートします。

于 2013-05-27T09:09:09.817 に答える
0 
<html>
<body>
    <div style="height: 100px; Width: 200px;"> <!-- Container -->
        <div style="float:left; height: 50px; Width:100px; background-color:red;">
        </div>
        <div style="float:left; height: 50px; Width:100px; background-color:blue;">
        </div>
        <div style="float:right; height: 50px; Width:100px; background-color:green;">
        </div>
    </div>
</body>
</html>
于 2013-05-27T09:18:27.550 に答える