图片说明

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/