html - 如何将此文本与图像对齐？

Question

我在 Stackoverflow 上看到了很多关于此的主题，但我仍然不知道如何在这种特殊情况下执行此操作。

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

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

我无法按照我想要的方式对齐文本。我想要第一张图片的Title顶部Description和两者对齐的右侧。但到目前为止，我一无所获。到目前为止，我有一个：http JSFiddle: //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;
}

更新了 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%;
}

这里举个例子。

Answer 4

您必须使图像向左浮动。

我补充说：

float:left;

到图像 div 的 css。那是你要找的吗？

http://jsfiddle.net/2jfSK/