如何將圖像旁邊的文字對齊？

Question

我在Stackoverflow上看到了很多這方面的主題，但我仍然無法知道如何在這個特殊情況下做到這一點。

我想顯示卡片時尚的列表，我有我開發的模板。它看起來像這樣：

在這裏，我有3張卡，並在第一個，我展示，我覺得divs應創建

我不能對齊文本我想要的方式。我想Title頂部的Description和兩個第一個圖像的權利。但到目前爲止，我已無處可去。我有一個JSFiddle我到目前爲止在這裏：http://jsfiddle.net/MEaze/

對不起有關醜陋的顏色，我只需要「看到」的div。

Answer 1

讓他們漂浮，並使用div代替p。

.trophy-image { 
    float: left; 
    background-color: #FF0000; 
    margin: 8px; 
    height: 56px; 
} 

.trophy-info { 
    float: left; 
    background-color: #00FF00; 
    margin: 8px; 
    line-height: 28px; 
} 

updated jsFiddle

Answer 2

你必須使用float:left

http://jsfiddle.net/cAT2B/
http://jsfiddle.net/y7GJa/
我還增加了一個第二圖像

您還應該使用DIV

.trophy-image { 
    background-color: #FF0000; 
    margin: 8px; 
    height: 56px; 
    float:left; 
} 

.trophy-info { 
    background-color: #00FF00; 
    float:left; 
} 

Answer 3

你必須要離開了圖像浮動。

我說：

float:left; 

的圖像div的CSS。那是你在找什麼？

http://jsfiddle.net/2jfSK/

Answer 4

你只需要浮動左移。這個div將自動成爲一個inline-block的：

.trophy-image { 
    background-color: #FF0000; 
    margin: 8px; 
    height: 56px; 
    float: left; 
} 

要說明設置爲可以使用的line-height圖像的中間：

.trophy-info { 
    //background-color: #00FF00; 
    line-height: 90%; 
} 

Here一個例子。