时间戳

首页 > 解决方案 > 让 div 粘在父级的底部

html - 让 div 粘在父级的底部

问题描述

我制作了一个简单的纯 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/

我已经尝试设置 position: relative 为父 div 和 position: absolute; 对于酒吧，它没有用..

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

标签： htmlcss

解决方案

添加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>

推荐阅读