0

#main3つのdivクラス.left .rightとを含むメインのdivIDがあり.left-topます。左上のdivボックスは左にフロートし、右のボックスは右にフロートします。CssとHtmlを以下に示します。ここで、右のボックスがleft-topボックスの高さと同じように下向きに浮かんでいて、上マージンがあるように配置されている理由がわかりません。このrightdivを最上位にのみ配置したいのです。

JSFIDDLE： http: //jsfiddle.net/9zTXt/2/

HTML:

<div id = "main">
<div class= "left-top"></div>
<div class = "left"></div>
<div class = "right"></div>    
</div>


CSS:

#main
{position:relative;
width:350px;height:800px;
background:grey; 
margin-top:20px;     
}
#main .left
{float:left;
position:relative;width:200px;height:800px;
background:red;
margin-top:10px;
}
#main .left-top 
{width:200px;height:30px;
background:blue;
}

#main .right
{float:right;position:relative;
width:130px;height:800px;background:green;
margin:10px 0px 0px 20px;   
}
4

3 に答える 3

4

これを試してくださいhttp://jsfiddle.net/9zTXt/4/

html

<div id = "main">
    <div>
        <div class= "left-top"></div>
        <div class = "left"></div>
    </div>
    <div class = "right"></div>    
</div>

css：

#main .right
{
    float:right;position:relative;
    width:130px;height:800px;background:green;
    margin:0px 0px 0px 20px;   
}

#main > div {
  float: left;
}

説明：.right基本的に、左側のフローティング要素を独自のdivでラップして、右側のフローティング要素と混同しないようにし、 divからマージントップを取り出します。

于 2013-03-11T17:42:18.380 に答える
1

div.rightが最初になるように、divを並べ替えてみてください。

于 2013-03-11T17:24:55.900 に答える
0

私の新しいシーケンスは

<div id="main">

<div id="left"></div>
<div id="right"></div>
<div id="top-left"></div>

</div>

左のdivの場合はtop-margin：30px、右のdivの場合は0pxです。

于 2013-03-11T17:35:45.967 に答える