Question

我有4个元素显示flex。显示为列。标准的zurb基础网格宽度为25％。

这些元素是空的，因为它们的角色是背景中的图像容器（我需要覆盖这就是为什么我不使用DenyingPolicy）。

以纯css3方式存在，使这个空div自动相同的高度。

宽度：25％，当这是250px时，高度应为25％。

我不能在JS中这样做但是......在纯粹的CSS中它会很棒，但我的脑袋是空的。

img

css是Zurb Foundation 6.4.2和每个 <div class="instagram-recent grid-x"> <div class="cell large-3 medium-3 small-12 instagram-individual-image-container" style="background-image: url('https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/21041955_144748202784493_5173738332273770496_n.jpg';)> <div class="cell large-3 medium-3 small-12 instagram-individual-image-container" style="background-image: url('https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/21041955_144748202784493_5173738332273770496_n.jpg';)> <div class="cell large-3 medium-3 small-12 instagram-individual-image-container" style="background-image: url('https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/21041955_144748202784493_5173738332273770496_n.jpg';)> <div class="cell large-3 medium-3 small-12 instagram-individual-image-container" style="background-image: url('https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/21041955_144748202784493_5173738332273770496_n.jpg';)> </div> bacground-size是封面

.instagram-individual-image-container宽度为25％我希望将cell large-3高度设置为当前宽度的100％。

提前感谢任何提示。

Answer 1

您可以使用:before并添加padding：

html, body {
  height: 100%;
  width: 100%;
  margin: 0; 
  padding: 0;
}

#parent {
  display: flex;
  flex-flow: row;
}

.child:before{
  content: '';
  padding: 50% 0; /* vertical value as  100% equals width */
  display: inline-block;
}

.child {
  width: 25%;
}

#child1 {
  background: red;
}

#child2 {
  background: blue;
}

#child3 {
  background: green;
}

#child4 {
  background: yellow;
}

<div id="parent">
  <div class="child" id="child1"></div>
  <div class="child" id="child2"></div>
  <div class="child" id="child3"></div>
  <div class="child" id="child4"></div>
</div>

Answer 2

你可以这样做，但你想要放在div中的内容必须放在position:absolute;

https://jsfiddle.net/4jz26uyn/1/

根据弹性显示中的百分比宽度自动设置高度

2 个答案: