css位置与百分比 [英] css position with percent

问题描述

我有一个问题在其他div的位置divs相对。

我想创建一个位于屏幕水平中间的div，在这个div中，我想放置另外3个具有相同高度的div。但所有的人都应该回应。

一张图片说的不止一句：）

 < div id =zwrapper > 
< div id =z1class =row>< / div> 
< div id =z2class =row>< / div> 
< div id =z3class =row>< / div> 
< / div> 
  

blu元素是HTML

  html {
 background：steelblue; 
 height：100％; 
 width：100％; 
 top：0; left：0; bottom：0; right：0; 
} 
  

其中我想添加三个红色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％包装，给中间一个边缘（上/下）5％，所以我得到一个100％的高度。
但是这不工作。

如果我调整窗口宽度，红色divs的高度改变，虽然我不改变高度。

我做一个小提琴来演示这个。 http://jsfiddle.net/ELPJM/

问题是 margin 中的百分比值 >总是相对于宽度，而不是高度。您可以通过使用绝对定位，并在每行上设置顶部值来实现此目的。像这样：

  .row {
 position：absolute; 
 width：80％; 
 background：red; 
 height：30％; 
} 
 
＃z1 {
 top：0％; 
} 
 
＃z2 {
 top：35％; 
} 
 
＃z3 {
 top：70％; 
} 
  

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

I have a problem with position divs relative in an other div.

I want to make a div that is position in the horizontal middle of the screen and in this div I want to place 3 other div with the same height. But all of them should be responsive.

A picture says more than words :)

<div id="zwrapper">
 <div id="z1" class="row"></div>
 <div id="z2" class="row"></div>
 <div id="z3" class="row"></div>
</div>

The blu element is the HTML

html{
  background: steelblue;
  height: 100%;
  width: 100%;
  top:0; left:0; bottom: 0; right:0;
}

The lime one ist that div (#zwrapper) where I want to add the three red divs.

#zwrapper{
  height: 81%;
  top: 10%;
  width: 100%;
  left: 0;
  position: absolute;
  background: lime;
}

The red divs make problems. All divs have a height of 30%. The first one should be aligned to top and the third to bottom. The middle div with the id #z2 is the only one which get a margin of 5%.

.row{
  position: relative;
  width: 80%;
  background: red;
  height: 30%;
 }
 #z2{
  margin: 5% 0;
 }

My idea was to put the 3 divs with a height of 30% into the wrapper and give the middle one a margin (top / bottom) of 5% so I get a height of 100%. But this does not work.

If I resize the window in width, the height of the red divs changes though I don't change the height.

I make a fiddle to demonstrate this. http://jsfiddle.net/ELPJM/

Thanks in advance

解决方案

The problem is that percent values in margin are always relative to width, not height. You can achieve this by using absolute positioning instead, and setting a "top" value on each row. Like this:

.row {
    position: absolute;
    width: 80%;
    background: red;
    height: 30%;
}

#z1 {
    top: 0%;
}

#z2 {
    top: 35%;
}

#z3 {
    top: 70%;
}

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

这篇关于css位置与百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！