CSS: размещение изображения слева от двух строк текста

#css #positioning

#css #позиционирование

Вопрос:

Как сказано в названии, я не хочу создавать список с возможностью кликабельности, в котором каждый элемент содержит изображение слева и две строки текста справа.

Прямо сейчас мне удалось реализовать элементы с помощью следующего кода:

HTML:

 <div class="verticalListItem">
                <a href="#">
                    <div class="verticalItemImage"><img src="images/vdfLogo.png" width="80" height="80" /></div>

                    <div class="verticalItemText">

                        <p>Pop/Rock</p>
                        <p>0</p>
                    </div>
          </a>
</div>

CSS:

 .verticalListItem  {
    border: 1px solid #333;
}

.verticalItemImage {
    float: left
}
.verticalItemImage img {
    display: block;       
}

Результат, который я имею сейчас, таков:
введите описание изображения здесь

Однако мое красное изображение не центрировано по вертикали и, что хуже всего, область под изображением и второй меткой, так как область над первой меткой (я пометил эти области зеленым цветом на втором элементе) не кликабельна. Что я здесь делаю не так, вы можете мне помочь, пожалуйста?

Заранее спасибо!

Ответ №1:

вот решение — http://jsfiddle.net/SaRnR

1. Привет, спасибо, это решило проблему некликабельных областей. Изображение по-прежнему не отцентрировано, но я могу смириться с небольшим дополнением 🙂 Еще раз спасибо!

Ответ №2:

Не уверен без тестирования, но у вас это должно сработать.

 .verticalListItem  {
    border: 1px solid #333;
}

.verticalListItem a {
    overflow: auto;
}

.verticalItemImage {
    float: left;
}
.verticalItemImage img {
    display: block;
}

.verticalItemText {
    float: left;
    display: block;
    line-height: 40px;
}