如何使用CSS将两个箭头图像(upvote/downvote)叠加在一起？

Question

uparrow.gif和downarrow.gif

所以,它看起来像这样:

如何创建3个div并使用CSS设置样式,以便这些箭头位于底部箭头上方的顶部箭头位置？

<div class="vote">  
<div class="uparrow" />  
<div class="downarrow" />  
</div>

我应该创建一个宽度有限的"投票"div吗？我会浮动:顶部和浮动:底部两个箭头div,背景设置为我的两个图像？我计划将内容直接放在投票箭头右侧,因此需要限制和严格.

Answer 1

不要使用div作为图像 - 已经有一个非常好的img标签了!

<div class="vote">
    <img alt="^" title="vote up"   src="/images/up.arrow.png" />
    <img alt="v" title="vote down" src="/images/down.arrow.png" />
</div>

然后简单地说:

.vote
{
    width: 15px;
    float: left; clear: left;
}

.vote img
{
    display: block;
    float: none; clear: both;
}

您可能希望为.vote添加一些余量,以将其与旁边的内容分开.