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