javascript - Div 框展开并重新定位其他 div 框

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;
    }

结果: Outcome

Answer 1

将此 CSS 规则添加到您的 Div 标签中:

display:inline-block;