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

Question

我有这样的设计:

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

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

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

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

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