html - 图片描述

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;
}