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;

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

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

2 个答案: