如何使用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把它从它会是下一个内容分开。

Answer 2

默认情况下，<div>元素是block-level这意味着它们是一行一行，并将水平扩展以填充它们的容器。

添加点击处理是另一个问题。您可以在uparrow和downarrow元素中包含<a>和<img>元素，或者按照您的建议（不太兼容的方式）在CSS中执行此操作。另一种选择是使用Javascript注册DOM事件。

HTML：

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

CSS：

div.vote { 
    width: 50px; 
    float: left; 
} 

div.uparrow { 
    background-image: url(...); 
} 

div.downarrow { 
    background-image: url(...); 
} 

Answer 3

使用2的div。浮动左边的文本div并将两个图像放在一个div中。使用图像上的display：block来强制一个在另一个之下。

Answer 4

比div更加语义和有效的解决方案将是这个，它也负责定位投票箱。

.content-item {padding-left:110px;position:relative; width:500px;border:1px solid red;} 
.vote{width:100px;position:absolute; top:0; left:0;border:1px solid red;} 
.vote h4 {style heading how you like} 
.vote img{width:100px;height:30px;background:black;} 

<div class="content-item"> content 
    <div class="vote"> 
    <h4>Vote</h4> 
    <img alt="vote up" src="..." /> 
    <img alt="vote down" src="..." /> 
    </div> 
</div>