3

これらの 2 つのインライン ブロック<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; }

説明: インライン ブロックは依然として「インライン」であり、垂直方向の配置はベースラインであり、一貫性がなく、高さが異なります。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 に答える