html - 为什么最后一个内联 block div 没有正确垂直对齐？

Question

我的 html 和 css 的输出目前看起来像这样:

我想要实现的是让 3 div 的垂直对齐在同一基线上，所以它看起来像这样:

当一个 div 的内容超过最大宽度时，它应该是这样的:

这是 HTML:

<div id="logger-box">
    <div class="logger-box-item" log-level="WARN">
        <div class="logger-box-item-component">APP</div>
        <div class="logger-box-item-level">WARN</div>
        <div class="logger-box-item-message">Open module "1"Open module "1"Open module "1"Open module "1"Open module "1"Open module "1"Open module "1"Open module "1"Open module "1"Open module "1"Open module "1"</div>
    </div>
    <div class="logger-box-item" log-level="INFO">
        <div class="logger-box-item-component">MODULE:LOGIN</div>
        <div class="logger-box-item-level">INFO</div>
        <div class="logger-box-item-message">Login failed</div>
    </div>
    <div class="logger-box-item" log-level="DEBUG">
        <div class="logger-box-item-component">MODULE:LOGOUT</div>
        <div class="logger-box-item-level">DEBUG</div>
        <div class="logger-box-item-message">Login the user out</div>
    </div>
    <div class="logger-box-item" log-level="ERROR">
        <div class="logger-box-item-component">MODULE</div>
        <div class="logger-box-item-level">ERROR</div>
        <div class="logger-box-item-message">Failed to open module</div>
    </div>
</div>

这是 CSS:

#logger-box {
    border: 1px solid #888;
    background-color: #F5F5F5;
}

.logger-box-item {

}

.logger-box-item-component {
    width: 150px;
    margin: 1px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    border-right: 1px solid #CCC;
    border: 1px solid #AAA;
}

.logger-box-item-level {
    width: 80px;
    margin: 1px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    text-align: center;
    border-right: 1px solid #CCC;
    border: 1px solid #AAA;
}

.logger-box-item-message {
    margin: 1px;
    display: inline-block;
    border: 1px solid #AAA;
    max-width: 150px;
}

每个 div 都设置为 display: inline-block。它与 display: inline-flex 一起工作，但是我想用 inline-block 来实现它。我该怎么做？

Answer 1

尝试使用 vertical-align: top; 和 display: inline-block;