Question

我有一个简单的table like this

<!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上测试过。

Answer 1

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

Answer 2

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

Answer 3

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

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

以下是DEMO

DIV不会放在细胞顶部

3 个答案: