html - 关于对齐事件块的 CSS 问题

Question

我想知道如何使用 css（没有 javascript 或其他）制作一些东西。

我将有单独的跨度和 div：

• MN（星期一 - 星期几）
• 30（日期）
• 九月（月）
• 和标题

也许有任何框架可以做到这一点？或者您能否至少提供一个不太复杂的变体示例，仅显示日期和月份。

（我正在使用 Twitter Bootstrap 框架 v2.3.2）

Answer 1

这很简单：将每个 span/div 的显示设置为table-cell和vertical-align，top或。那，并为元素设置不同的字体和大小。bottommiddle

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