Как я могу сложить два изображения стрелок (upvote / downvote) поверх друг друга с помощью CSS?

Question

uparrow.gif и downarrow.gif

Итак, это будет выглядеть так:

Как я могу создать 3 элемента div и стилизовать их с помощью CSS, чтобы эти стрелки были позициями с верхней стрелкой над нижней стрелкой?

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

Должен ли я создать div для голосования с ограниченной шириной? Буду ли я плавать: top и float: bottom двух 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, что означает, что они являются однострочными и будут расширяться по горизонтали для заполнения их контейнера.

Добавление обработки кликов - еще одна проблема. Вы можете включить элементы <a> и <img> в элементы uparrow и downarrow или сделать это в CSS, как вы предлагали (менее совместимый способ). Другой вариант - регистрация событий DOM с помощью Javascript.

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

Было бы более семантическое и эффективное решение, чем 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>

Answer 4

Используйте 2 деления. Переместите текстовый div влево и поместите два изображения в один div. используйте display: block на изображениях, чтобы заставить один под другим.