0 
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
        .left, .right {
            display: inline-block;
            width: 49%;
        }
        .left {
            height: 20px;
            background-color: #dddddd;
        }
        .right {
            height: 100px;
            background-color: #eeeeee;
        }
        </style>
    </head>
    <body>
        <div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>
</html>
4

3 に答える 3

3

デフォルトでは、インライン要素はベースラインに垂直に配置されるためです。それを変更する必要があります。

.left, .right { vertical-align: top; }
于 2012-10-27T14:07:01.813 に答える
1

を使用しているからですdisplay:inline-block;。したがって、すべての要素は、指定された垂直方向の配置に対応して配置されます。

あなたができる.left, .right { vertical-align: top; }

または単にあなたの箱を浮かべてください

.left, .right { float:left; display:block; }

IEの方がいいだろう

于 2012-10-27T14:10:50.413 に答える
0

使っているからdisplay:inline-block;

.left {
    height: 20px;
    background-color: #DDD;
    vertical-align: top;
    }

これを試して。

于 2012-10-27T18:39:01.627 に答える