6

これが私の問題です。

高さのすべてのスペースを占有し、幅を半分に分割する 2 つの div を含むラッパー div(幅: 800px および高さ: 250px) があります。

CSS をセットアップし、右の div を float: right にフロートします。これは、本来あるべき場所に表示されますが、もう一方の「下」に表示され、ラッパーの div スペースを超えています (これは可能であってはなりません)。

jdfiddle とコードの両方を投稿しています。

JS フィドル http://jsfiddle.net/FV9yC/

HTML

<div id="wrapper">
    <!-- left div -->
    <div id="leftDiv">
        <h1>This is my heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <!-- right div -->
    <div id="rightDiv">
        <h1>This is my heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
</div>

CSS

#wrapper {
    background-color: grey;
    height: 200px;
    width: 500px; }

#leftDiv {
    background-color: purple;
    height: 200px;
    width: 250px; }

#rightDiv {
    background-color: green;
    float: right;
    height: 250px;
    width: 250px; }
4

6 に答える 6

11

rightDivIDの div を ID の div の上に移動するだけleftDivです。それでおしまい。

これがワーキングソリューションです

コード：

<div id="wrapper">
    <!-- right div -->
    <div id="rightDiv">
        <h1>This is my heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>    
    <!-- left div -->
    <div id="leftDiv">
        <h1>This is my heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
</div>
于 2013-07-08T11:24:53.943 に答える
2

http://jsfiddle.net/FV9yC/1/

float: left左の div に追加する必要があります。

于 2013-07-08T11:24:18.387 に答える
0

これを試して

http://jsfiddle.net/FV9yC/5/

#wrapper {
    background-color: grey;
    height: 200px;
    width: 500px;

}

#leftDiv {
    background-color: purple;
    height: 200px;
    width: 250px;
      float:left;

}

#rightDiv {
    background-color: green;
    float: right;
    height: 250px;
    width: 250px; }
于 2013-07-08T11:26:31.920 に答える