CSS：在两行文本的左边放置一个图像

Question

就像标题所示，我不想创建一个可点击的列表，其中每个元素左侧包含一个图像，右侧包含两行文本。眼下

我设法实现与下面的代码中的元素：

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;  
} 

结果我现在是这样的：

但是，我的红色图像不是ce垂直和最差的区域：图像和第二个标签下方的区域，因此第一个标签上方的区域（我在第二个元素上标记了带绿色的区域）不可点击。我在这里做错了什么，你能帮助我吗？

在此先感谢！

Answer 1

这里是解决方案 - http://jsfiddle.net/SaRnR/

Answer 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; 
}