CSS在不同位置獲取多個文本框

這是我的挑戰：我有一個真實屬性的圖像，將隨機加載到200像素寬的DIV中。相應地，圖像將被調整爲200像素寬度和可變高度（保持成比例）。我有一個需要去到圖像四個獨立的字幕：CSS在不同位置獲取多個文本框

標題
價格
位置
表面

他們需要在頂部中心分別定位，底部圖片的左下角，左下角和右下角。所以，我有這樣的事情：

-------------------------------- 
|    Title   | 
|        | 
|        | 
|Price       | 
|Location    Surface| 
--------------------------------

我知道，我可以把DIV中的相對位置和絕對位置的文本疊加文字到圖像，但我只似乎能夠設置一個位置無論我使用多少個課程，下面的所有文本div。

有什麼建議？

編輯：找到解決方案。作爲參考，在這裏是生成的代碼：

<div id="stampRandom"> 
    <img class="stampImg" src="myphoto.jpg"> 
    <div class="title"><span>Title</span></div> 
    <div class="prix"><span>Location</span><span><br><b>Price</b></span></div> 
    <div class="surf"><span><b>Surface</span></b></span></div>     
</div>

而CSS：

#stampRandom { 
    position: relative; 
    top: 0px; 
    left: 0px; 
    width: 200px; 
    color: #FFF; 
    font-size: 80%; 
} 

#stampRandom { 
    position: relative; 
    top: 0; 
    left: 0; 
    width:200px; 
    color: #ffffff; 
    /* text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000; */ 
    font-size:80%; 
} 
#stampRandom img { 
    top:0px; 
    left:0px; 
    width:200px; 
} 
#stampRandom div { 
    position: absolute; 
    width: 200px; 
} 
#stampRandom div span { 
    background: rgb(0, 0, 0); /* fallback color */ 
    background: rgba(50, 50, 50, 0.7); 
} 
.title { 
    top:2px; 
    width:100%; 
    text-align:center; 
} 
.prix { 
    bottom:0px; 
    left:0px; 
} 
.surf { 
    bottom:0px; 
    right:0px; 
    text-align:right; 
}

感謝所有誰幫助了！我被封鎖時間很長，我的代碼需要重做。手臂上新鮮出手！

來源

2014-10-27 rpmth

你需要什麼來幫助你？ – 2014-10-27 12:41:12

給我們一些代碼，geeza。 – Victor 2014-10-27 12:42:41

http://jsfiddle.net/h51xLdzg/

<style> 
.img-cont{position:relative;width:200px;} 
.img-cont div{position:absolute; background:red} 
.img-title{top:0px;width:100%;text-align:center;} 
.img-price{bottom:0px; left:0px;} 
.img-surf{bottom:0px; right:0px;text-align:right;} 
</style> 
<div class="img-cont"> 
    <img src="/MyImage.jpg" width="200"/> 
    <div class="img-title"> 
     Title 
    </div> 
    <div class="img-price"> 
     Price Location 
    </div> 
    <div class="img-surf"> 
     Surface 
    </div> 
</div>

想到這將幫助你

來源

2014-10-27 12:54:04

這一個很簡單，併爲樣本工作。由於某些原因，當我將它應用於所有PHP標籤時，我不得不添加「text-align：right;」到img-surf類來讓它工作。 – rpmth 2014-10-27 13:49:57

當然，我只是錯過了對齊右下（img-surf）div。已編輯 – 2014-10-28 06:05:20

我做了一個快速的例子，說明如何做到這一點。這不是完美的，但它的工作原理。如果你需要一些其他的幫助或不同的方法讓我知道了底部和左下角的文字

http://jsfiddle.net/hg9r7/134/

<div class="imageWrapper"> 
<img src="http://dummyimage.com/250x200" alt="1" width="250" height="200" /> 
<div class="top">TOP</div> 
<div class="bot">BOT</div> 
<div class="botleft">BOTLEFT</div> 
<div class="botright">BOTRIGHT</div> 
</div>

CSS例子：

.bot{ 
position:absolute; 
background:red; 
text-align:center; 
margin:0 auto; 
width:100px; 
left:50%; 
margin-left:-50px; 
bottom:0; 
} 

.botleft{ 
position:absolute; 
background:red; 
text-align:center; 
margin:0 auto; 
width:100px; 
left:0; 
bottom:0; 
}

來源

2014-10-27 12:52:46 trainoasis

CSS在不同位置獲取多個文本框

回答

相關問題