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; 

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