代码之家 › 专栏 › 技术社区 › Don A.R.B.N

如何使用css/html显示不同高度的垂直线?

css html

Don A.R.B.N · 技术社区 · 7 年前

我正在寻找一种干净的方式来显示底部对齐的垂直颜色栏。当前实现使用 font-size 这是hacky&结果是垂直居中的条。

<div id="barChart">
{% for bar in bars %}
    <div class="bar" style="border-left-color:{{color}};font-size:{{barHeight}}">.</div>
{% endfor %}
</div>

CSS:

.bar{
    color:transparent;
    display:inline;
}

如何并排显示不同高度的垂直彩色条& bottom-aligned

看见 jsfiddle .

1 回复 | 直到 7 年前

Don Bob 7 年前

你可以用 display: inline-block 这允许您设置 height 和 width 像块元素,但仍像 inline border-color background-color 如果你想在条之间留点距离,你可以用一个 margin ,但 边缘

这里的诀窍是 vertical-align: bottom

#barChart {
  vertical-align: bottom;
}

.bar {
  background-color: transparent;
  display: inline-block;
  width: 10px;
  height: 0px;
  margin-right: 3px;
}

<div id="barChart">
  <div class="bar" style="background-color:lightblue;height:150px"> </div>
  <div class="bar" style="background-color:lightgreen;height:100px"> </div>
  <div class="bar" style="background-color:salmon;height:50px"> </div>
  <div class="bar" style="background-color:lightblue;height:150px"> </div>
  <div class="bar" style="background-color:lightgreen;height:110px"> </div>
  <div class="bar" style="background-color:salmon;height:100px"> </div>
</div>