Question

DIV的定位让我发疯，所以我希望有人可以帮助我。

我在一个大的里面有4个div。黄色留在左边 - 好的

红色保持正确 - 好的

蓝色保持在右边，但边距应与屏幕相关，而不是红色div ..如何解决？

粉红色保持在右侧，但想要放在蓝色和红色之下。怎么做？

欢迎任何帮助！

我有这个： enter image description here

想要这个： enter image description here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>


#divtop {
    background-color: #000;
    width: 100%;
    height: 75px;
    float: left;
    position: absolute;
    z-index: 0;

}

#divtop #div1 { /* yellow */
    float: left;
    position: relative; 
    margin-left: 50px;
    width:100px;
    background-color:#FF0;
}

#divtop #div2 {
    float:right;    
    position:relative;  
    margin-right:50px;  
    width:30px;
    background-color:#F00; /* red */
}

#divtop #div3 {
    float:right;
    position:relative;
    margin-right:100px;     
    width:60px;
    background-color:#00F; /* blue */
}

#divtop #div4 {
    float:right;    
    position:relative;  
    width:150px;    
    margin-right:50px;  
    margin-top:40px;        
    background-color:#F0F;  /* pink */

}
</style>
</head>

<body>

<div id="divtop"><!-- DIV TOP --><!-- black -->

<div id="div1"><!-- yellow -->
&nbsp;
</div>

<div id="div2"><!-- red -->
&nbsp;
</div>

<div id="div3"><!-- blue -->
&nbsp;
</div>

<div id="div4"><!-- pink -->
&nbsp;
</div>

</div><!-- END DIV TOP -->


</body>
</html>

Answer 1

我认为这可以帮助你。

＆＃13;

#divtop {
    background-color: #000;
    width: 100%;
    height: 75px;
    z-index: 0;
  padding:0px 50px;
  box-sizing:border-box;

}

#divtop #div1 { /* yellow */
    float: left;
    width:100px;
    background-color:#FF0;
}

#divtop #div2 {
    float:right;    
    margin-right:50px;  
    width:30px;
    background-color:#F00; /* red */
}

#divtop #div3 {
    float:right;
    width:60px;
    background-color:#00F; /* blue */
}

#divtop #div4 {
    float:right;    
    position:relative;  
    width:150px;    
    margin-top:40px;        
    background-color:#F0F;  /* pink */
  clear:both;

}

＆＃13;

<div id="divtop"><!-- DIV TOP --><!-- black -->

<div id="div1"><!-- yellow -->&nbsp; </div>

<div id="div3"><!-- blue --> &nbsp;</div>
<div id="div2"><!-- red -->&nbsp; </div>

<div id="div4"><!-- pink -->
&nbsp;
</div>

</div><!-- END DIV TOP -->

＆＃13;

Answer 2

我建议你将2个父div作为1表示左，1表示右浮动。因此使用浮点数很容易管理。 DEMO： http://jsfiddle.net/arw17hff/

<div id="divtop"><!-- DIV TOP --><!-- black -->
<div class="left">
<div id="div1"><!-- yellow -->
&nbsp;
</div>
 </div>
<div class="right">
<div id="div2"><!-- red -->
&nbsp;
</div>  
<div id="div3"><!-- blue -->
&nbsp;
</div>   
<div id="div4"><!-- pink -->
&nbsp;
</div>      
    </div>   
</div><!-- END DIV TOP -->

#divtop {
    background-color: #000;
    width: 100%;
    height: 75px;
    float: left;
    position: absolute;
    z-index: 0;

}

#divtop #div1 { /* yellow */
    position: relative; 
    margin-left: 50px;
    width:100px;
    background-color:#FF0;
}

#divtop #div2 {
    float:right;    
    position:relative;  
    margin-right:50px;  
    width:30px;
    background-color:#F00; /* red */
}

#divtop #div3 {
    position:relative;
    margin-right:100px;     
    width:60px;
    background-color:#00F; /* blue */
}

#divtop #div4 {
    float:right;    
    position:relative;  
    width:150px;    
    margin-right:50px;  
    margin-top:40px;        
    background-color:#F0F;  /* pink */

}
.left{float:left}
.right{float:right}

Answer 3

那么像this这样的东西呢？我刚刚将以下规则添加到#divtop＃div4

clear:both;

Answer 4

请尝试添加新的div元素div5，如下所示。无标题文档

#divtop {
    background-color: #000;
    width: 100%;
    height: 75px;
    float: left;
    position: absolute;
    z-index: 0;

}

#divtop #div1 { /* yellow */
    float: left;
    position: relative; 
    margin-left: 50px;
    width:100px;
    background-color:#FF0;
}

#divtop #div2 {
    float:right;    
    position:relative;  
    margin-right:50px;  
    width:30px;
    background-color:#F00; /* red */
}

#divtop #div3 {
    float:right;
    position:relative;
    margin-right:100px;     
    width:60px;
    background-color:#00F; /* blue */
}

#divtop #div4 {    
    position:relative;  
    width:150px;    
    margin-right:50px;  
    margin-top:40px;        
    background-color:#F0F;  /* pink */

}
#divtop #div5 {/* to bind div2,div3,div4 together */
    float:right;    
    position:relative;  
    width:auto;    
}
</style>
</head>

<body>

<div id="divtop"><!-- DIV TOP --><!-- black -->

<div id="div1"><!-- yellow -->
&nbsp;
</div>
<div id="div5">
<div id="div2"><!-- red -->
&nbsp;
</div>

<div id="div3"><!-- blue -->
&nbsp;
</div>

<div id="div4"><!-- pink -->
&nbsp;
</div>
</div>
</div><!-- END DIV TOP -->


</body>
</html>

Div定位 - 如何将一个置于其他人之下

4 个答案: