为什么这两个内联块没有对齐？ [复制]答案

【问题标题】：Why are these two inline-blocks not aligned? [duplicate]为什么这两个内联块没有对齐？ [复制]
【发布时间】：2013-02-14 05:17:36
【问题描述】：

这两个内联块<div> 应该（至少，我认为它们会）对齐：

<div class="calendar">
    <div class="month">
        <div class="month-name">January</div>
    </div>
    <div class="day">
        <div class="day-number">21</div>
        <div class="day-name">Wednesday</div>
    </div>
</div>

<div class="button"></div>

我已经以像素精度设置了每个<div> 的高度：

.calendar {
    display: inline-block;
    width: 80px;
    height: 74px;
}
.calendar .month {
    background-color: firebrick;
    border-radius: 3px 3px 0 0;
}
.calendar .month-name {
    color: white;
    font-size: 13px;
    text-align: center;
    height: 26px;
}
.calendar .day {
    background-color: linen;
    border-radius: 0 0 3px 3px;
}
.calendar .day .day-number {
    color: black;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    height: 30px;
}
.calendar .day .day-name {
    color: darkgray;
    font-size: 10px;
    text-align: center;
    height: 18px;
}

.button {
    background-color: silver;
    display: inline-block;
    border-radius: 3px;
    width: 220px;
    height: 74px;
}

但这会产生以下结果：

这是此代码的fiddle。

这让我发疯，但结果在多个浏览器中是一致的，所以我一定是做错了什么。

谁能解释原因并提供解决方法？

【问题讨论】：

@Oriol “这个问题之前已经被问过并且已经有了答案”。不，我之前问过这个问题。最好将另一个标记为与这个重复？
是的，您的问题较旧，但另一个问题更“受欢迎”：3953 对 155 次观看，10 对 1 次投票，1 对 0 次收藏，34 对 5 次投票。如果您不同意，请随时在meta 中讨论。
有点道理，我猜。尽管如此，收到“这个问题之前已经问过”的消息还是很不礼貌的；该消息可以改进。

标签： css

【解决方案1】：

在任何有内联块的地方执行vertical-align:top。

.calendar { vertical-align: top; }

解释：inline-blocks 仍然是“in-line”，垂直对齐是基线，这意味着它们不一致并且会随着它们的高度而变化，top 使它们始终从顶部开始。

【讨论】：

谢谢，你能解释一下原因吗？
inline-blocks 仍然是“in-line”，垂直对齐是基线，这意味着它们不一致并且它们的高度会有所不同，top 使它们始终从顶部开始。

【解决方案2】：

在日历 div 上设置垂直对齐到顶部

.calendar {
    display: inline-block;
    width: 80px;
    height: 74px;
    vertical-align:top;
}

jsFiddle example

【讨论】：

谢谢，你能解释一下原因吗？
因为默认的垂直对齐是基线，你需要它们顶部对齐。
谢谢，你的答案是相同的，我接受了一个并赞成另一个！