Question

我有一个图表，可以根据屏幕大小添加条形图或删除条形图。例如，如果大小大于800px，则会向图形添加另一个条形。或者，如果它小于800px，则删除最后一个条形。

我使用等式height:cal(100%*number/max);来查找图表中条形的高度。但我也有媒体查询删除或添加栏。我希望最高的酒吧总是100％的高度，其他的比例。

是否有一个CSS解决方案来保持比例div高度？

调整浏览器大小超过800px。
查看最后一个dt是图表高度的100％。
将浏览器大小调整为小于800px
看看最后一个dt如何只是第一张图的高度的50％，但我想保持比例如图二。

我有：

.bargraph{
  display:flex;
  align-items:flex-end;
  height:200px;
  background:yellow;
  padding:0 10px;
}
.bargraph dt{
  margin:0 10px;
  border:6px solid blue;
  background:red;
  box-sizing:border-box;
  flex-grow:1;
}
 .bargraph dt:nth-of-type(3){
  display:none;
 }
@media only screen and (min-width:800px){
 .bargraph dt:nth-of-type(3){
  display:block;
 }
 #want{
  display:none;
 }
}

<dl class="bargraph">
  <dt style="height:20%;"></dt>
  <dt style="height:40%;"></dt>
  <dt style="height:100%"></dt>
</dl>

<div id="want">
  I want:
  <dl class="bargraph" id="want">
    <dt style="height:50%;"></dt>
    <dt style="height:100%;"></dt>
  </dl>
</div>

https://jsfiddle.net/a9mm7ttn/

保持相称的div高度

0 个答案: