多个垂直div，高度与宽度相关

我的css布局的一部分设置div高度与宽度相关，因此纵横比对于所有屏幕尺寸都是相同的。这种方式我从来没有专门将div的高度设置为px值 - 高度仅仅是宽度的高宽比。如果你之前还没有碰到过这种技术，here is a good explanation。多个垂直div，高度与宽度相关

到我的特殊问题...

考虑到这一点我已经创建了下面这个简单的div是两倍宽，因为它是高：(to see it in action please see this fiddle)

<html> 
    <head> 
     <style type="text/css"> 
.container 
{ 
    position:relative; 
    width:50%;/*half the width of the whole page*/ 
    margin:auto;/*center the whole thing*/ 
} 
.relative_container 
{ 
    background-color:blue; 
    position:absolute; 
    width:100%; 
    top:0; 
    left:0; 
} 
.set_height 
{ 
    width:100%; 
    height:100%; 
    margin-top:50%;/*aspect ratio 2:1*/ 
} 
     </style> 
    </head> 
    <body> 
     <div class='container'> 
      <div class='relative_container'> 
       <div class='set_height'></div> 
      </div> 
     </div> 
    </body> 
</html>

都好到目前为止。然而，我然后想在第一个下添加另一个相同的div。正如你在this fiddle中看到的那样，我无法让它们以任何方式显示，除了彼此之外。毫无疑问，答案在于清除div as demonstrated here，但我无法弄清楚。

来源

2013-02-03 mulllhausen

'.container's只有1个元件：绝对定位的元素。绝对定位的元素从父母的角度来看，其行为类似于“display：none”元素。此外，'clear'ed元素仅受'float'ed元素影响，但您的示例中没有浮点数。 – biziclop

谢谢。即使我把'margin：auto'换成'float：left'，问题仍然存在 – mulllhausen

你应该以某种方式摆脱'pos：abs'。 – biziclop

你的relative_container类是绝对定位的，所以它将两个div放在最上面：0，left：0，宽度和高度相同（所以它们相互重叠）。这对你正在做的事情没有意义。

如果您将位置更改为相对位置，并将float: left添加到您的奇怪名称relative_container，您将获得所需的行为，因为它们将“浮动”到其父级div中最左边的位置。

此外，您的“清晰”divs没有做任何事情。 clear属性告诉其他div不要浮动到给定div的右侧/左侧。如果你的div的宽度是100％（即它填满了父级），那么无论如何都不能在它旁边浮动。

实施例1：http://jsfiddle.net/NKRPe/13/

编辑：This second example完成相同的任务而无需使用虚设DIV。请注意，可以使用padding-top或padding-bottom。

来源

2013-02-03 10:27:34 zpr

oops。 html中的“清除”并不意味着我的问题。我已经删除它。似乎人们并不理解我为什么使用'位置：绝对'，所以我现在要添加一些解释 – mulllhausen

明确的div确实没用，但为了获得高度相对于年龄百分比的宽度，这个相对/绝对结构是（据我所知 - 最近一直在寻找这样的功能，并采用相同的解决方案）必要的 – mikakun

嗯...它似乎工作没有'位置：绝对'在小提琴:)我要调查 – mulllhausen

的添加到.container：

padding:25% 0 0;

来源

2013-02-03 10:31:40 mikakun

确实有效。唯一的问题是我需要改变每个新宽高比的填充。我知道乞丐不能选择器，但它看起来像@ zpr的解决方案可以避免这个额外的步骤。无论如何，谢谢。 – mulllhausen

多个垂直div，高度与宽度相关

回答

相关问题