html - 如何让这些文本内联显示？

Question

我有这个设计：

目前，所有东西都包裹在这个深色背景的矩形中。图片和每个文本字符串都在它自己的类中。文本在跨度中，末尾有换行符。

我的问题是我希望三个文本字符串显示在图片的右侧，如下所示：

我敢打赌，这很简单，但由于某种原因，我无法为此提出解决方案。

这里没有太多要讨论的标记，但无论如何我都会粘贴它。

<div class="wrapper">
    <div class="pic"><img src="img.png" width="164" height="128"></div>
    <span class="username">petronella</span></br>
    <span class="info">Kvinna, 22 år, Uppsälje</span></br>
    <span class="desc"><em>Hej!!Jag heter Petronella~~~</em></span>
</div>

.wrapper {
    position: relative;
    float: left;
    width: 420px;
    padding: 15px;
}
.pic {
    position: relative;
    width: 164px;
    height: 128px;
}
.username {
    position: relative;
}
.info {
    position: relative;
    font-weight: bold;
}
.desc {
    position: relative;
}

任何帮助表示赞赏，谢谢。

Answer 1

.spotlight-pic尝试向左浮动：

<div class="wrapper">
    <div class="spotlight-pic"><img src="img.png" width="164" height="128"></div>
    <span class="username">petronella</span></br>
    <span class="info">Kvinna, 22 år, Uppsälje</span></br>
    <span class="desc"><em>Hej!!Jag heter Petronella~~~</em></span>
</div>

.wrapper {
    position: relative;
    float: left;
    width: 420px;
    padding: 15px;
}
.spotlight-pic {
    position: relative;
    width: 164px;
    height: 128px;
}
.username {
    position: relative;
}
.info {
    position: relative;
    font-weight: bold;
}
.desc {
    position: relative;
}
.spotlight-pic {
    float: left;
    margin-right: 15px;
}

Answer 2

将图像浮动到左侧。

作为旁注，将这些文本行放在span元素中（并且br将 s 分开）而不是例如h2用户名和p其余部分是非常奇怪的。

看看它长什么样。

Answer 3

看看这个 jsFiddle。如果您将其他内容块（图像外部）包装在 a 中div，那么您只需要以下样式

.wrapper > div { float: left; }

Answer 4

要使 img div 浮动到 span 标签的左侧，请添加以下 css：

.spotlight-pic {
    float: left;
}