将 CSS 直方图条定位在 div 底部

Question

我正在尝试使用 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>

Answer 1

一个简单的选择是添加以下内容：

.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>