CSSを使用して2つの矢印イメージ（upvote/downvote）を重ねる方法はありますか？

Question

uparrow.gifので

downarrow.gif、それはそうのようになります。

どのように私は3つのdivを作成し、それらのように、CSSでそれらのスタイルを設定することができますが矢印は下矢印の上の上矢印を持つ位置ですか？

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

制限された幅で「投票」divを作成する必要がありますか？私は浮き上がりますか？トップとフロート：2つの画像として設定された背景を持つ2つの矢印の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にある程度のマージンを追加することもでき

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

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

。

Answer 2

、<div>要素は、ごとに1つのラインであり、そのコンテナを埋めるために横方向に拡張されます意味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を左に浮かべて、2つのイメージを1つの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>