Question

我有css的问题。如何在每张图片下添加文字My option？

这是jsfiddle DEMO：http://jsfiddle.net/Leq3R/

我的css代码在这里：

.product_des1 {
    width: 375px;
    float: left;
    height: auto;
    overflow: hidden;
    font-size: 13px;
    line-height: 22px;
    margin-bottom: 72px;
    margin-left: 100px;
}
.product_des1:nth-child(2n+1) {
    margin-right: 0;
}
.product_des1 img {
    float: left;
    margin-right: 10px;
}
.product_des1 span {
    color: #44a6e0;
}
#all {
    width: 1034px;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
}

Answer 1

如果我理解正确，您需要在每张图片下添加相同的文字。您只能使用以下代码通过css实现此目的：

.product_des1:after {
    content: "My option";
    display: block;
    clear: both;
}

这是更新的小提琴http://jsfiddle.net/Leq3R/4/

所以我实际上在容器之后添加了一些文本，女巫将在图像下方显示。

Answer 2

像这样：

变化：

.product_des1 img {
    float: left;
    margin-right: 10px;
}

要：

.product_des1 img {
    display:block;
}

Answer 3

您可以使用:before / :after伪选择器来解决您的问题。

我在您的代码中添加了以下css代码。

#all>div:before {
    content:"myOption";
    position:absolute; /* to show the content on the image */
    top:0;  /* pinning the content to top of this container */
    left:0;  /* keeping the content to left at the place of image */
}
#all>div {
    position:relative;
}

Working Fiddle

如何在每张图片下添加文字？

3 个答案: