如何使用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>