是否有可能將div浮動到其容器（有填充）的底部？

Question

我想能夠浮動一個div到容器的底部。我使用絕對定位來實現：

#outer { 
 
    background: lightblue; 
 
    min-height: 100px; 
 
    padding: 20px; 
 
    position: relative; 
 
    } 
 

 
#inner { 
 
    background: red; 
 
    position: absolute; 
 
    bottom: 20px; 
 
}

<div id=outer> 
 
    <div id=inner>BLAH BLAH</div> 
 
    </div> 
 

在上面，爲了使定位尊重在外容器的底部邊框，我不得不重複20px與bottom: 20px填充。我的問題是，這違反了DRY原則 - 當我改變兩個數字中的一個時，我不希望這會被破壞。

不尊重填充的示例是float。如果我向左或向右移動，它只浮動到填充。

我懷疑我可以使用預處理器的變量（如LESS？） - 但不包括，有沒有辦法做到這一點？

Answer 1

那麼，當然flexbox，但我不知道這將是多麼可擴展。

#outer { 
 
    background: lightblue; 
 
    min-height: 100px; 
 
    padding: 20px; 
 
    display: flex; 
 
} 
 
#inner { 
 
    background: red; 
 
    align-self: flex-end; 
 
}

<div id=outer> 
 
    <div id=inner>BLAH BLAH</div> 
 
</div>

Answer 2

使用的利潤率，而不是墊襯？

#outer { 
 
    background: lightblue; 
 
    min-height: 100px; 
 
    margin: 20px; 
 
    position: relative; 
 
    } 
 

 
#inner { 
 
    background: red; 
 
    position: absolute; 
 
    bottom: 0px; 
 
}

<div id=outer> 
 
    <div id=inner>BLAH BLAH</div> 
 
    </div> 
 

Answer 3

的子元素只需使用CSS 「bottom: 0;」。

Answer 4

我決定只與另一div去#inner的div採取min-height屬性之前：

#outer { 
 
    background: lightblue; 
 
    padding: 20px; 
 
    } 
 

 
#beforeinner { 
 
    min-height: 100px; 
 
    } 
 

 
#inner { 
 
    background: red; 
 
}

<div id=outer> 
 
    <div id=beforeinner></div> 
 
    <div id=inner>BLAH BLAH</div> 
 
</div>