圖片中的價格標籤

-4

無法設置讓分隔框停留在另一個div盒的底部，就像圖片中一樣！圖片中的價格標籤

因此，HTML代碼將是這樣的：

<div class="product_standard" > 
    <div class="product_low" > 

    </div> 
</div>

來源

2014-03-06 Kristian Tang

position：product_standard上的相對位置：absolute，bottom：0，width：100％在product_low上。很基本的東西。 – ceejayoz

謝謝你的幫助，可能只是不記得，我不是最好的CSS，但我是爲PHP腳本：D –

我做了一個演示按照圖像。

----下面是CSS代碼----

#main{background:url("http://lorempixel.com/500/500"); 
    width:500px; 
height:500px; 
    position:relative; 
    } 
#main:after{ 
    content: "12.49 EURO"; 
    z-index:1; 
    position:absolute; 
    bottom:0; 
    height:50px; 
    width:100%; 
    font-size:2em; 
    color:#000000; 
    background-color:rgba(255, 255, 255, 0.5) 
}

--- HTML代碼看起來像----

<div id="main"> </div>

這裏的工作演示。 http://jsbin.com/duhicoqo/1/

來源

2014-03-06 20:06:50

發佈演示鏈接爲你工作？ –

如果Demo鏈接適用於您，可以通過接受答案來關閉此答案。 –

謝謝不錯的演示！ –

圖片中的價格標籤

回答

相關問題