0

我有我的主要 div id #main，其中包含 3 个 div 类.left .right和.left-top. left 和 left-top div box 向左浮动，而 right box 向右浮动。下面给出了 Css 和 Html。这里我不知道为什么我的右框向下浮动等于left-top框的高度，并且放置得像有一些上边距一样。我right只希望这个 div 位于最顶部。

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;
}

解释：基本上将您的左浮动元素包装在自己的 div 上，这样它们就不会与右浮动元素混淆，并从您的.rightdiv中取出 margin-top

于 2013-03-11T17:42:18.380 回答
1

尝试重新排序您的 div，以便div.right首先出现。

于 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 为 30px，右 div 为 0px。

于 2013-03-11T17:35:45.967 回答