保證金崩於消除邊界

Question

方案

我已經創建並放置一個DIV在引導電網。我正在對齊DIV中的4個項目，即。

1. 頭（相對，100％寬度）
2. 段落（絕對 - 左下）
3. 段落（絕對 - 右下）
4. 背景（絕對 - 100％的寬度，4rem高度，底部）

Demo

問題

當我從DIV（CSS - 線118）刪除邊框的邊緣（1）的保證金崩潰（2）和（3），（或者這就是它看起來像。）可能是什麼問題？

注

，因爲我需要的DIV擴大時，有在頭更多的內容，如在第三DIV可見我不能固定的高度分配給DIV。

Answer 1

似乎沒有border而是display: flex在「.title」類上的「.content」和width: 100%上工作。您也可以將「.content-border-js」和「.content-border-css」上的border替換爲outline，以避免將鼠標移到其中一個元素上時移動兄弟元素。

.content{ 
    position: relative; 
    z-index: 1; 
    display: flex; 
    margin: 1rem auto; 
    max-width: 25rem; 
    background-color: white; 
    /*border: 1px solid transparent;*/ 
    box-shadow: 2px 2px 2px #bbb; 
    transition: border 100ms ease; 
} 

.content .title{ 
    text-align: center; 
    width: 100%; 
    font-size: 1.3rem; 
    margin: 3rem 1rem 8rem; 
} 

.content-border-js{ 
    outline: 1px solid #f3df49; 
} 
.content-border-css{ 
    oultine: 1px solid #33a9dc; 
} 

編輯：無Flexbox的

確定沒有Flexbox的另一種解決方案：

設置outline上 「內容邊境-JS」 和 「內容-邊境的CSS」。然後在「.content」類上使用overflow: auto。

.content{ 
    position: relative; 
    z-index: 1; 
    margin: 1rem auto; 
    overflow: auto; 
    max-width: 25rem; 
    background-color: white; 
    /*border: 1px solid transparent;*/ 
    box-shadow: 2px 2px 2px #bbb; 
    transition: border 100ms ease; 
} 

.content-border-js{ 
    outline: 1px solid #f3df49; 
} 
.content-border-css{ 
    oultine: 1px solid #33a9dc; 
}