3

这两个内联块<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;
}

但这会产生以下结果：

内联块

这是这段代码的一个小提琴。

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

任何人都可以解释原因并提供解决方法吗？

4

2 回答 2

6

做vertical-align:top任何有内联块的事情。

.calendar { vertical-align: top; }

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

于 2013-02-13T20:46:13.023 回答
4

将垂直对齐设置为日历 div 的顶部

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

jsFiddle 示例

于 2013-02-13T20:46:27.253 回答