我正在尝试使用 CSS 为我正在创建的指标表创建一个直方图小部件。
在下面的代码中,直方图条形已正确创建,它们具有正确的高度,但尽管我指定了vertical-align:bottom,条形图还是在最长条形的底部对齐。
如果我创建一个 100% 的条形图,一切都会很好地对齐,但我不会总是拥有 100% 的值。
我已经尝试了多种方法,包括绝对定位......我一直把事情搞砸,这就是我正确显示它的结束
有人如何对齐容器底部的条吗?以下是下面的代码(我包含了一个高度为 100% 且显示正确的直方图和一个高度为 45% 且仅与 45% 条形底部对齐的直方图:
<style>
.metrics-table {
margin-bottom: 20px;
white-space: nowrap;
}
.metrics-row {
display: inline-block;
margin-right: 10px;
vertical-align: top;
}
.text-metric, .text-value {
display: inline-block;
padding: 5px;
}
.text-metric {
background-color: lightskyblue;
color: black;
border-radius: 5px;
}
.histogram {
width: auto;
height: 28px; /* Adjust height as needed */
background-color: lightblue;
border: 1px solid blue;
border-radius: 5px;
overflow: hidden;
display: inline-block;
vertical-align: bottom;
line-height: 0; /* Remove extra space below */
}
.histogram-bar {
width: 10px;
background-color: blue;
border-radius: 5px;
display: inline-block;
margin-left: 0px;
vertical-align: bottom; /* Align bars to the bottom */
}
</style>
<div class="metrics-table">
<div class="metrics-row">
<div class="text-metric">Histogram</div>
<div class="histogram">
<div class="histogram-bar" style="height: 5%;"></div>
<div class="histogram-bar" style="height: 15%;"></div>
<div class="histogram-bar" style="height: 25%;"></div>
<div class="histogram-bar" style="height: 35%;"></div>
<div class="histogram-bar" style="height: 45%;"></div>
<div class="histogram-bar" style="height: 100%;"></div>
</div>
</div>
</div>
<div class="metrics-table">
<div class="metrics-row">
<div class="text-metric">Histogram</div>
<div class="histogram">
<div class="histogram-bar" style="height: 5%;"></div>
<div class="histogram-bar" style="height: 15%;"></div>
<div class="histogram-bar" style="height: 25%;"></div>
<div class="histogram-bar" style="height: 35%;"></div>
<div class="histogram-bar" style="height: 45%;"></div>
</div>
</div>
</div>
一个简单的选择是添加以下内容:
.histogram {
display: inline-flex;
align-items: end;
}
.metrics-table {
margin-bottom: 20px;
white-space: nowrap;
}
.metrics-row {
display: inline-block;
margin-right: 10px;
vertical-align: top;
}
.text-metric, .text-value {
display: inline-block;
padding: 5px;
}
.text-metric {
background-color: lightskyblue;
color: black;
border-radius: 5px;
}
.histogram {
width: auto;
height: 28px; /* Adjust height as needed */
background-color: lightblue;
border: 1px solid blue;
border-radius: 5px;
overflow: hidden;
vertical-align: bottom;
line-height: 0; /* Remove extra space below */
display: inline-flex;
align-items: end;
}
.histogram-bar {
width: 10px;
background-color: blue;
border-radius: 5px;
display: inline-block;
margin-left: 0px;
vertical-align: bottom; /* Align bars to the bottom */
}
<div class="metrics-table">
<div class="metrics-row">
<div class="text-metric">Histogram</div>
<div class="histogram">
<div class="histogram-bar" style="height: 5%;"></div>
<div class="histogram-bar" style="height: 15%;"></div>
<div class="histogram-bar" style="height: 25%;"></div>
<div class="histogram-bar" style="height: 35%;"></div>
<div class="histogram-bar" style="height: 45%;"></div>
<div class="histogram-bar" style="height: 100%;"></div>
</div>
</div>
</div>
<div class="metrics-table">
<div class="metrics-row">
<div class="text-metric">Histogram</div>
<div class="histogram">
<div class="histogram-bar" style="height: 5%;"></div>
<div class="histogram-bar" style="height: 15%;"></div>
<div class="histogram-bar" style="height: 25%;"></div>
<div class="histogram-bar" style="height: 35%;"></div>
<div class="histogram-bar" style="height: 45%;"></div>
</div>
</div>
</div>