如何將div背景與其內容的底部對齊

我有一個背景我想使用它與我的內容形成鮮明對比，除了圖像底部的25％左右。我怎樣才能將25％的位置與內容的底部對齊，或者距離底部的距離？對內容的高度與頁面寬度不同，背景有大小蓋如何將div背景與其內容的底部對齊

HTML

<div class="firstPanel">content here</div>

CSS

.firstPanel { 
    background-image: URL("path-to-background"); 
    background-position: 50% 70%; 
    background-repeat: no-repeat; 
    background-size: cover; 
    width: 100%; 
    padding: 20px; 
    padding-bottom: 100px; 
}

來源

2015-02-10 Malik Drako

的選擇應該是'.first.panel' – j08691 2015-02-10 17:47:48

看起來像自動更正改變了它，固定 – 2015-02-10 18:00:01

可是仍然不對 – j08691 2015-02-10 18:02:22

從我在你的問題的理解，在CSS中，你會增加這個：

margin-bottom:25%;

這指定了容器的寬度百分比元件。

來源

2015-02-10 17:49:20

這讓我更接近，但它仍然重疊時窗口更窄，文本開始打包，並且我希望空間比窗口更寬時的空間小 – 2015-02-10 18:04:24

嘗試將此添加到CSS：'position：relative; z-index：1;' – 2015-02-10 19:08:26

似乎除了導致div在另一部分之上繪製之外沒有太多的工作。如果將媒體查詢的margin更改爲填充並使用'margin-bottom：calc（250px - 25％）'將值保留爲<0，可以修復較大的空間，但在狹窄時我該怎麼辦？ – 2015-02-11 00:37:38

使用此在css文件

*{ 
    margin: 0; 
    padding: 0; 
}

它會清除頁面中的所有不可避免的空間。

來源

2015-02-10 17:57:39

我有'body {margin：0;填充：0; }」 – 2015-02-10 18:01:43

如何將div背景與其內容的底部對齊

回答

相關問題