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;

＆＃13;

#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*/
}

＆＃13;

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

＆＃13;

为什么最后一个内联块div不能正确对齐？

2 个答案: