css位置百分比

前端之家收集整理的这篇文章主要介绍了css位置百分比前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在其他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%;
}

http://jsfiddle.net/ELPJM/8/

原文链接:https://www.f2er.com/css/215183.html

猜你在找的CSS相关文章