Question

我需要将元素的高度设置为其宽度的2/3。我知道我可以在In [1417]: df Out[1417]: user item \ 0 b80344d063b5ccb3212f76538f3d9e43d87dca9e The Cove - Jack Johnson 1 b80344d063b5ccb3212f76538f3d9e43d87dca9e Entre Dos Aguas - Paco De Lucia 2 b80344d063b5ccb3212f76538f3d9e43d87dca9e Stronger - Kanye West 3 b80344d063b5ccb3212f76538f3d9e43d87dca9e Constellations - Jack Johnson 4 b80344d063b5ccb3212f76538f3d9e43d87dca9e Learn To Fly - Foo Fighters rating 0 1 1 2 2 2 3 2 4 2 In [1418]: df.set_index('user').apply(tuple, 1)\ .groupby(level=0).agg(lambda x: list(x.values))\ .to_dict() Out[1418]: {'b80344d063b5ccb3212f76538f3d9e43d87dca9e': [('The Cove - Jack Johnson', 1), ('Entre Dos Aguas - Paco De Lucia', 2), ('Stronger - Kanye West', 2), ('Constellations - Jack Johnson', 2), ('Learn To Fly - Foo Fighters', 2)]}

之类的东西中使用JS来做到这一点

我可以使用没有预处理器的直接CSS做同样的事情吗？

Answer 1

是的，这是一个受欢迎的黑客

但现在我们有css变量/自定义属性，你可以使用它。虽然不完全支持

＆＃13;

.p{
  width: 60px;
}

.c {
  background-color: cyan;
  width: 100%;
  padding-top: 150%;
}

/* advanced css custom properties */
.a {
  --width: 60px;
  width: var(--width);
  height: calc(var(--width)*1.5);
  background-color: rebeccapurple;
}

＆＃13;

 
 <!-- hack using padding -->
 <div class="p">
    <div class="c">
      
    </div>
  </div>
  <br>
  
  <!-- advanced css using custom properties/ css variables --> 
  <div class="a"></div>

＆＃13;

Answer 2

您可以将元素设置为height: 0;padding-bottom: 66.67%，但是您必须绝对定位任何子内容。这是否实用取决于元素内部的内容。

使用css基于宽度定义高度

2 个答案: