html图片位置百分比,css位置百分比

我在其他div中的位置div相对有问题.

我想制作一个位于屏幕水平中间位置的div,在这个div中我想放置另外3个具有相同高度的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的高度会改变,但我不会改变高度.

提前致谢