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

cssに追加vertical-align: top;するだけです。これは、すべてのセルのコンテンツをデフォルトの ではなく に.Calendar > div > div揃えたいと仮定しています。topmiddle

于 2012-06-23T04:01:44.047 に答える
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 に答える
0

解決策は非常に洗練されていませんが、必要なのは div の順序を逆にすることだけなので、.headerRight div を HTML の .headerLeft div の FRONT に配置します。

于 2012-06-23T03:59:51.063 に答える