我在其他div中的位置div相对有问题.
我想制作一个位于屏幕水平中间位置的div,在这个div中我想放置另外3个具有相同高度的div.但他们所有人都应该做出回应.
一张图片说的多于单词:)
<div id="zwrapper"> <div id="z1" class="row"></div> <div id="z2" class="row"></div> <div id="z3" class="row"></div> </div>
blu元素是HTML
html{
background: steelblue;
height: 100%;
width: 100%;
top:0; left:0; bottom: 0; right:0;
}
石灰一个是div(#zwrapper),我想添加三个红色div.
#zwrapper{
height: 81%;
top: 10%;
width: 100%;
left: 0;
position: absolute;
background: lime;
}
红色的div会产生问题.所有div都有30％的高度.第一个应该对齐顶部,第三个对齐到底部. id为#z2的中间div是唯一一个获得5％边际的div.
.row{
position: relative;
width: 80%;
background: red;
height: 30%;
}
#z2{
margin: 5% 0;
}
我的想法是将3个高度为30％的div放入包装中,并给中间的一个5％的边距(顶部/底部),这样我的高度为100％.
但这不起作用.
如果我在宽度上调整窗口大小,红色div的高度会改变,但我不会改变高度.
我做了一个小提琴来证明这一点. http://jsfiddle.net/ELPJM/
提前致谢
解决方法
问题是边距中的百分比值总是相对于宽度而不是高度.您可以通过使用绝对定位来实现此目的,并在每行上设置“顶部”值.像这样：
.row {
position: absolute;
width: 80%;
background: red;
height: 30%;
}
#z1 {
top: 0%;
}
#z2 {
top: 35%;
}
#z3 {
top: 70%;
}
