0

http://judopassion.com/wordpress/

在内容 div 中有一些文章对象。每篇文章都有一张图片。在图像上，我会在左下角的图像上画一个箭头。我已经用 div contentArrow 实现了。问题是所有图像的宽度相同但高度不同，所以我不知道如何为所有类型的高度修复 contentArrow。现在 contentArrow 仅适用于 269px 高度的图像。 在此处输入图像描述 我该怎么做？非常感谢。

4

3 回答 3

1

#contentImageSrc必须是一个类.contentImageSrc，因为您多次使用它。不能重复 ID的规则

移动contentArrow div到里面contentImageSrc DIV，然后将你的 CSS 写成 -

.contentImageSrc{ position: relative; }
.contentArrow { position: absolute; bottom: 10px; left: 10px;}
于 2012-10-15T10:13:11.723 回答
1

您可以将图像包装在具有相对位置的 div 中，并将箭头绝对定位在将“底部”值设置为 0 的内部：

<div class="imageWrapper">
    <div class="contentArrow"></div>
    <img src="image.jpg" />
</div>

CSS：

.imageWrapper{position:relative}
    .contentArrow{position:absolute; background:url(arrow.png); bottom:0; left:15px}
于 2012-10-15T10:16:06.997 回答
0

实际上，您只需一个包装器和一些巧妙的 CSS 就可以完成所有这些工作。

下面显示一个示例。请注意，大部分 CSS 只是为了美观 - 功能的实际内容是IMG标签被包裹在SPANs 中的事实，并且SPAN标签应用了以下内容：

span.selected:after {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: 10px; left: 50%; 
    margin: 0 0 0 -25px;
    height: 0; width: 0;
    border: 20px solid transparent;
    border-bottom-color: #fff;
    z-index: 1;
}

通过像这样为特定类的元素设置样式:after- 您可以创建箭头的白色部分。元素的附加样式:before只是在白色箭头周围创建黑色边框。

您可以在以下位置看到一个工作示例：http: //jsfiddle.net/TroyAlford/wRrW6/

<span><img src="http://placekitten.com/400/400" /></span>
<span class="selected"><img src="http://placekitten.com/410/410" /></span>
<span><img src="http://placekitten.com/420/420" /></span>

<style type="text/css">
img {
    border: 1px solid #333;
    color: transparent;
    display: inline-block;
    padding: 5px; margin: 5px;
    position: relative;
    width: 200px; height: 200px;
}
span { display: inline-block; }
span:hover { cursor: pointer; }
span.selected { position: relative; }
span.selected > img { background: #268; }
span.selected:before, span.selected:after {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: 10px; left: 50%; 
    margin: 0 0 0 -25px;
    height: 0; width: 0;
    border: 20px solid transparent;
    border-bottom-color: #000;
    z-index: 1;
}
span.selected:after {
    bottom: 9px; left: 50%; 
    margin: 0 0 0 -25px;
    height: 0; width: 0;
    border: 20px solid transparent;
    border-bottom-color: #fff;
}
</style>
于 2013-02-08T00:51:18.030 回答