分区框展开并重新定位其他分区框

Question

所以我正在制作一个项目，我想要三框样式的页面，但是当我进行自动扩展以适应框内的内容时，它会浮动在其他框上，因为我必须定位它们。

html代码：

<div class="content">
    <h2>Contact me</h2>
    <p>--content holder--</p>
</div>
<div class="content-bottom-left">
    <p>--content holder--</p>
</div>
<div class="content-bottom-right">
    <p>--content holder--</p>
</div>

我的CSS:

.content {
    background-color: 373737;
    top: 15%;
    width: 55%;
    right: 25%;
    position: absolute;
    overflow: hidden;
    margin-bottom: auto;
}
.content-bottom-left {
    background-color: 373737;
    width: 27%;
    left: 15%;
    top: 60%;
    position: absolute;
    overflow: hidden;
}
.content-bottom-right {
    background-color: 373737;
    width: 27%;
    right: 20%;
    top: 60%;
    position: absolute;
    overflow: hidden;
    }

结果：结果

Answer 1

将此CSS规则添加到您的div标签中：

display:inline-block;

Answer 2

您的CSS不允许元素的位置随着上面的内容而移动将以下内容添加到两个较低的应该可以做到这一点。

clear: both;

告诉元素避免与它们碰撞的左右两侧的元素发生碰撞，以及behnam bozorg的评论，这应该有效。你也可以删除顶部的绝对位置，因为它是被按下的任何方式。

.content-bottom-left {
    background-color: 373737;
    width: 27%;
    left: 15%;
    top: 60%;
    position: absolute;
    overflow: hidden;
}
.content-bottom-right {
    clear: both;
    display: inline-block;
    background-color: 373737;
    width: 27%;
    right: 20%;
    top: 60%;
    position: absolute;
    overflow: hidden;
}