0

我有一个像这样的简单表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link href="Theme.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="Calendar">
        <div>   
            <div>
                <div>
                    <div class="headerLeft">yyyyyy</div>
                    <div class="headerRight">xxxxxx</div>
                    <div class="clear"></div>
                </div>
            </div>

            <div>
                <div>
                    <div class="headerLeft">yyyyyy</div>
                    <div class="headerRight">xxxxxx</div>
                    <div class="clear"></div>
                </div>

                <div>asfs</div>
            </div>

        </div>
    </div>
</body>
</html>

CSS

.Calendar
{
    display:table;
    width:500px;
    table-layout:fixed;
}
.Calendar > div
{
    display:table-row;
}
.Calendar > div > div
{
    display:table-cell;
    height:70px;
    border: solid 1px #e0e0e0;
}

.headerRight
{
    float:right;
}
.headerLeft
{
    float:left;
}
.clear
{
    clear: both;
}

为什么第一个单元格中的 div ("yyy xxx") 不在顶部？如果我做错了什么或遗漏了需要添加的内容，请现在告诉我。我在 Firefox 和 Chrome 上进行了测试。

4

3 回答 3

1

你可以添加vertical-align: top;到.Calendar > div > divCSS。这是假设您希望所有单元格的内容与top默认对齐而不是对齐middle。

于 2012-06-23T04:01:44.047 回答
0

该解决方案非常不优雅，但您所要做的就是颠倒您的 div 的顺序，因此在您的 HTML 中将 .headerRight div 放在 .headerLeft div 的前面

于 2012-06-23T03:59:51.063 回答
0

添加 vertical-align:top;到CSS.Calendar > div > div

 .Calendar > div > div
{
    vertical-align:top;
    display:table-cell;
    height:70px;
    border: solid 1px #e0e0e0;
}

这是演示

于 2012-06-23T07:55:34.187 回答