Question

我制作了一个简单的仅限CSS的条形图，但所有条形都从顶部开始。

.wrap {
  width: 400px;
  position: relative;
  overflow: hidden;
}

.barchart {
  display: inline-block;
  margin-left: 0.2px;
}

.barchart.column {
  width: 11px;
  margin-left: 3px;
  font-size: xx-small;
  text-align: center;
  color: #fff;
}

<div class="wrap">
  <div class="barchart column" style="background: #666; height: 
    50px">5</div>
  <div class="barchart column" style="background: #666; height: 
    70px">7</div>
</div>

演示：https://jsfiddle.net/jL68sa0h/

我已经尝试设置位置：相对于父级div和位置：绝对；对于酒吧，这是行不通的。

仅使用CSS如何使条形图固定在底部？谢谢！

Answer 1

将vertical-align:bottom;添加到您的。barchart类中：

.wrap {
  width: 400px;
  position: relative;
  overflow: hidden;
}

.barchart {
  display: inline-block;
  margin-left: 0.2px;
  vertical-align:bottom;
}

.barchart.column {
  width: 11px;
  margin-left: 3px;
  font-size: xx-small;
  text-align: center;
  color: #fff;
}

<div class="wrap">
  <div class="barchart column" style="background: #666; height: 
    50px">5</div>
  <div class="barchart column" style="background: #666; height: 
    70px">7</div>
</div>

Answer 2

如何使用flexbox？您只需将包装器包装为弹性盒，然后将其对齐至弹性端即可：

.wrap {
  display: flex;
  align-items: flex-end;
}

Answer 3

使用~/anaconda3/bin/python3.7或flex-flow: wrap-reverse;

align-items: flex-end;

解决方案：

.wrap {
      display : flex;
      flex-flow: wrap-reverse;
}

.wrap {
  width: 400px;
  position: relative;
  overflow: hidden;
  display : flex;
  flex-flow: wrap-reverse;
  height:100vh;
}

.barchart {
  display: inline-block;
  margin-left: 0.2px;
}

.barchart.column {
  width: 11px;
  margin-left: 3px;
  font-size: xx-small;
  text-align: center;
  color: #fff;
}

使div紧贴父级的底部

3 个答案: