如何在兩個部分之間響應地創建常量邊距/填充？

我有兩個部分堆疊。我在容器div上使用position:relative，然後在子div上使用position:absolute來定位它們相對於父容器的頂部。如何在兩個部分之間響應地創建常量邊距/填充？

這是我的代碼（也對這個JSFiddle）：

html,body{height: 100%; width: 100%;} 
 

 
h1{ 
 
    font-size: 20px; 
 
    font-family: 'Avenir', sans-serif; 
 
    color: #212121; 
 
} 
 

 
h2{ 
 
    font-size: 18px; 
 
    font-family: 'Avenir', sans-serif; 
 
    font-weight: lighter; 
 
    color: #424242; 
 
} 
 

 
p{ 
 
    font-family: 'Avenir', sans-serif; 
 
    font-size: 18px; 
 
} 
 

 
.container{ 
 
    position: relative; 
 
    max-width: 960px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
} 
 

 
#header{ 
 
    position: absolute; 
 
    top: 10px; 
 
    max-width: 960px; 
 
    line-height: 30px; 
 
} 
 

 
#header h1{padding-top: 5px;} 
 
#header {max-width: 800px;} 
 

 
#projects{ 
 
    position: absolute; 
 
    top: 240px; 
 
}

<div class = "container"> 
 
    <section id = "header"> 
 
    <h1>Name Lastname</h1> 
 
    <h2>Description, Description</h2> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam euismod non metus id semper. Integer volutpat, mauris vitae pulvinar rhoncus, lacus lectus euismod augue, sit amet interdum lectus leo et magna. Curabitur in tellus vel tellus finibus faucibus quis sit amet risus. Etiam id sagittis ligula. Ut facilisis, nisi eu.! 
 
    </p> 
 
    </section> 
 

 
    <section id = "projects"> 
 
    <p>Another paragraph on projects</p> 
 
    </section> 
 

 
</div>

我試圖使頁面響應，但是，當我減少頁面的寬度，頭部div （頂部）擠入底部的項目div使其難以辨認。

如何創建兩個div之間的恆定間距？

來源

2015-12-27 Senginel

絕對定位是佈局網頁的一種非常糟糕的方法。它非常不靈活，並且有更好更快的響應選項。退房[** LearnLayout.com **]（http://learnlayout.com/） –

@Paulie_D感謝您的指導！只是讀它！ – Senginel

正如上面的評論中提到的，答案是刪除position: absolute;。父容器內的默認流將用於子div的堆疊。然後，您可以使用margin-top或margin-bottom調整子div之間的間距。

來源

2015-12-27 10:48:44 BrettJephson

如何在兩個部分之間響應地創建常量邊距/填充？

回答

相關問題