我在使div元素垂直堆叠时遇到问题。我内部有一个mainwrapper和2个div元素，需要堆叠。但是每当我给第一个内部的东西时div position: absolute，right: 0甚至float: right是第二个div。有没有办法解决？
<div class="wrapper">
<div class="test1"></div>
<div class="test2">
<div class="test3"></div>
</div>
</div>
CSS：
.wrapper {
width: 605px;
margin: 0 auto;
position: relative;
background: transparent;
border: 1px solid black;
height: 240px;
}
.test1 {
border: 1px solid black;
width: 200px;
height: 30px;
display: block;
position: absolute;
right: 0;
}
.test2 {
border: 1px solid red;
width: 600px;
height: 200px;
display: block;
position: absolute;
}
.test3 {
border: 1px solid black;
width: 100px;
height: 20px;
position: absolute;
bottom: 20px;
right: 0;
}
这是我的jsfiddle。
将http://jsfiddle.net/uFf9D/工作？
我注释了.wrapper的尺寸，并添加了溢出：隐藏。然后将.test1和.test2更改为position：relative和float：right。
编辑：读取宽度，因为它需要居中。
.wrapper {
width: 605px;
/*
height: 240px;
*/
overflow: hidden;
...
}
.test1 {
/*
position: relative;
*/
float: right;
...
}
.test2 {
position: relative;
float: right;
...
}
如果您想跳过浮点数并溢出：隐藏，方向：rtl可能是.wrapper上的一种解决方案。.不知道它是否有效或是否被继承。
尝试对.test2进行以下添加以填充.test1：
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句