Question

我有一个标题分为几个部分。

首先，它分为左，右。

然后将正确的部分分为堆叠的顶部和底部，或者至少是我尝试做的事情。

然而，他们不会出现（除非有文字或其他内容。）

HTML

<div id="header">
    <div id="header_left">
        <div id="header_title">
            <p id="t1">TEXT</p>
            <p id="t2">TEXT</p>
            <p id="t3">TEXT</p>
        </div>
    </div>
    <div id="header_right">
        <div id="right_top">x</div>
        <div id="right_bottom">x</div>
    </div>
</div>

CSS

    #header_right {
    height:100%;
    float:right;
}

#right_top {
    height:140px;
    width:100%;
    display:block;
    background-color:#FF0000;
}

#right_bottom {
    height:60px;
    width:100%;
    display:block;
    background-color:#000;
}

Answer 1

您必须为空div设置 position：absolute 才能显示

position:absolute;

Answer 2

你应该添加这个：

#header_right {
    height:100%;
    float:left;  /*changed from right*/
}

/*added new class*/
#header_left{
    float: left;
    width: 97%;
}

Divs不会扩展到100％宽度（在另一个div中彼此叠加）

2 个答案: