圖片說明

Question

http://jsfiddle.net/3V6MM/

請告訴我，我該怎麼寫類=「財產所有權」共同的風格來顯示圖像下的屬性名稱。

請指導我。

圖像放置像下面

Answer 1

看看這個佈局。另請注意，ID應該是唯一的。您多次使用圖像縮略圖。

現場演示：http://jsfiddle.net/9C72X/

HTML

<div> 
    <div class="image-thumb"> 
    <img src="http://www.javeacasas.com/images/javea-property.jpg"> 
    <p class="property-title">Land for Sale</p> 
    </div> 

    <div class="image-thumb"> 
    <img src="http://in.all.biz/img/in/service_catalog/15784.jpeg"> 
    <p class="property-title">Sale at Mura, Puttur</p> 
    </div> 
</div> 

CSS

.image-thumb { 
    display: inline-block; 
    vertical-align: top; /* <-- update to solve multiline text */ 
    width: 200px; 
} 

.image-thumb img { 
    width: 100%; 
} 

.property-title { 
    text-align: center; 
    font-size: 10px; 
} 

Answer 2

個人而言，我不認爲你需要絕對定位的標題。

你也可以考慮使用不同的標記。

<figure class="image-thumb"> 
    <img class="imgthumg"> 
    <figcaption class="property-title"> 
     image title 
    </figcaption> 
</figure> 

試試這個，左邊的浮動導致您的圖像拇指容器崩潰。

.img-thumb { 
    position: relative; 
    padding-left: 5px; 
    word-spacing: 10px; 
    float: left; 
} 

.imgthumb { 
    width:230px; 
    height:161px; 
    background:#FFF; 
    border:1px solid #909090; 
    margin-left:10px; 
    margin-bottom: 30px; 
} 

.property-title { 
    bottom: 0; 
    font-family: 'Verdana'; 
    font-size: 8pt; 
    margin-left: 10px; 
    margin-top: 10px; 
    width: 236px; 
    position: absolute; 
} 

Answer 3

下面一個這些CSS類替換爲：

#image-thumb 
{ 
padding-left: 5px; 
word-spacing: 10px; 
float:left; 
} 

.imgthumb 
{ 
    width:230px; 
    height:161px; 

    position:relative; 
    background:#FFF; 
    border:1px solid #909090; 
    margin-left:10px; 

    } 

.property-title 
{ 

font-family: 'Verdana'; 
font-size: 8pt; 
margin-left: 10px; 
margin-top: 0; 
position: relative; 
width: 236px; 
} 

http://jsfiddle.net/abhinavpratap/3V6MM/4/