html - イベント ブロックの整列に関する CSS の問題

Question

css を使用して (javascript などを使用せずに)、何かを作成するにはどうすればよいでしょうか。

次の場合、個別のスパンと div を使用します。

• MN (月曜日 - 曜日)
• 30（日付）
• 9月（月）
• そしてタイトルに

多分それを行うためのフレームワークはありますか？または、日付と月のみが表示された、少なくともそれほど複雑ではないバリアントの例を提供してください。

(私は Twitter Bootstrap フレームワーク v2.3.2 を使用しています)

Answer 1

これは簡単です: 各スパン/div の表示をとtable-cell、またはに設定します。そして、要素に異なるフォントとサイズを設定します。vertical-aligntopbottommiddle

Answer 2

そんな感じWorking Fiddle

それをいじって、必要に応じて調整しますが、これが基本的なレイアウトです。

HTML:

<div class="Container">
    <div class="Row">
        <div><span>MN</span><span>30</span><span>Sep</span></div>
        <div>Some Event</div>
    </div>
    <div class="Row">
        <div><span>MN</span><span>30</span><span>Sep</span></div>
        <div>Some Event</div>
    </div>
    <div class="Row">
        <div><span>MN</span><span>30</span><span>Sep</span></div>
        <div>Some Event</div>
    </div>
</div>

CSS:

.Container
{
    display: table;
    width: 500px;
    border-spacing: 20px;
}
.Row
{
    display: table-row;
}
.Row > div
{
    display: table-cell;
    font-size: 35px;
}
.Row span:first-child
{
    vertical-align: top;
    font-size: 15px;
}
.Row span:nth-child(2)
{
    vertical-align: middle;
    font-size: 30px;
    font-weight: bold;
}
.Row span:nth-child(3)
{
    vertical-align: bottom;
    font-size: 15px;
}