為什么最后一個內聯塊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;

Answer 2

它放置vertical-align: top; 您將其放在各節中。 並且確保.logger-box-item是display: block;

 #logger-box { } .logger-box-item { display: block; /*added*/ } .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; vertical-align: top; /*added*/ } .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; vertical-align: top; /*added*/ } .logger-box-item-message { margin: 1px; display: inline-block; border: 1px solid #AAA; max-width: 150px; vertical-align: top; /*added*/ } 

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