DIV 定位让我发疯所以我希望这里有人能帮助我。
我在一个大的里面有 4 个 div。 黄色留在左边 - OK
红色留在右边 - OK
蓝色保持在右边，但边距应该与屏幕相关，而不是红色部分。如何解决这个问题？
粉色留在右边，但要放在蓝色和红色下方。如何做到这一点？
欢迎任何帮助!
我有这个:
并且想要这个:
<!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 -->
</div>
<div id="div2"><!-- red -->
</div>
<div id="div3"><!-- blue -->
</div>
<div id="div4"><!-- pink -->
</div>
</div><!-- END DIV TOP -->
</body>
</html>
最佳答案
我想这对你有帮助。
#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;
}<div id="divtop"><!-- DIV TOP --><!-- black -->
<div id="div1"><!-- yellow --> </div>
<div id="div3"><!-- blue --> </div>
<div id="div2"><!-- red --> </div>
<div id="div4"><!-- pink -->
</div>
</div><!-- END DIV TOP -->关于html - Div定位——如何把一个放在其他的下面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28395481/