傳播高度/其他屬性值設置爲子元素

我有這個simple CSS：傳播高度/其他屬性值設置爲子元素

div { 
    height: 50px; 
    border-bottom: 1px solid black; 
    position: relative; 
} 

div:before { 
    content: ''; 
    display: inline-block; 
    width: 30px; 
    height: 30px; 
    background: green; 
    position: absolute; 
    top: 50px; 
}

的想法是，綠框的正下方底邊框位置。爲此我需要明確指定top屬性。我正在考慮如何避免以像素爲單位指定顯式度量，並以某種方式從父級接收它。我可以想出的唯一解決方案是在父母上指定父母身高的font-size，然後在父母的身高中引用它。所以下面的解決方案是可能的：

div { 
    font-size: 50px; //equal to height 
} 

div:before { 
    top: 1em; 
}

這種方法的顯着缺點是什麼？優點是可以將greenbox div添加到任何高度的父級，而無需更改geenbox div的top屬性。

來源

2014-09-24 AngularInDepth.com

指定'底部：'的'，而不是頂部：' – 2014-09-24 13:34:12

@Diodeus，你的意思是我可以指定等於綠盒子div的高度負底部？是的，那是可能的。但是一般的方法呢？你甚至看過它用過嗎？ – 2014-09-24 13:38:14

如果你指定'bottom'，它應該在父元素的底部，而不管它的高度。也許我不明白你的目標是什麼。也許添加一個圖表。 – 2014-09-24 13:40:47

最簡單的解決方法是使用top: 100%，如下所示。

100％值基於父元素的高度計算，所以最終結果是僞元素的頂部與父塊的底部邊緣對齊。

這種方法的優點是，它可以用於父div的任何高度值以及僞元素的任何高度值。

div { 
 
    height: 80px; 
 
    border-bottom: 1px solid black; 
 
    position: relative; 
 
} 
 

 
div:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 30px; 
 
    height: 30px; 
 
    background: green; 
 
    position: absolute; 
 
    top: 100%; 
 
}

<div></div>

來源

2014-09-24 13:45:03

謝謝，這真是很好的解決方案。你能不能添加一些關於'font-size'來傳播屬性本身的方法？也許在其他情況下？ – 2014-09-24 13:54:33

這應該工作。無論父母的身高如何，它都會保留在父母的下方。

div:before { 
    content: ''; 
    display: inline-block; 
    width: 30px; 
    height: 30px; 
    background: green; 
    position: absolute; 
    bottom:-30px; 
}

來源

2014-09-24 13:46:51

傳播高度/其他屬性值設置爲子元素

回答

相關問題