Question

我的主要内容#main包含3个div类.left .right和.left-top。左侧和左侧顶部div框向左浮动，而右侧框向右浮动。下面给出了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;   
}

Answer 1

试试这个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上，这样他们就不会弄乱正确的浮动元素，并从你的.right div中取出margin-top

Answer 2

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

Answer 3

我的新序列是

<div id="main">

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

</div>

顶部边距：左边div为30px，右边div为0px。

在main-div包装内的3 div框时清除浮动

3 个答案: