如何在图像旁边对齐此文本？

Question

我在Stackoverflow上看过很多关于这方面的主题，但我仍然无法在这个特殊情况下找到如何做到这一点。

我试图以卡片方式显示列表，我有一个我开发的模板。它看起来像这样：

这里我有3张卡片，在第一张卡片中，我显示了我认为应该创建divs的位置

我无法按照我想要的方式对齐文本。我希望Title位于Description之上，并且两者都在第一张图片的右侧。但到目前为止，我无处可去。我有JSFiddle到目前为止我所拥有的内容：http://jsfiddle.net/MEaze/

对于丑陋的颜色感到抱歉，我只需要“看到”div。

Answer 1

您必须使用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 2

让它们浮动，并使用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 3

您只需要将图像浮动到左侧。此div将自动成为内联块：

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

要将描述设置到图像的中间，您可以使用line-height：

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

Here 一个例子。

Answer 4

你必须让图像向左浮动。

我补充说：

float:left;

到图像div的css。那是你在找什么？

http://jsfiddle.net/2jfSK/