图片描述

Question

http://jsfiddle.net/3V6MM/

请告诉我如何为class =“property-title”编写常用样式，以在图像下显示属性名称。

请指导我。

图片的位置如下

Answer 1

看看这个布局。另请注意，ID应该是唯一的。您多次使用image-thumb。

现场演示：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/