如何将这些文本显示为内联？

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。

<强> See what it looks like.

Answer 3

结帐this jsFiddle。如果您将另一个内容块（图像外部）包裹在div中，那么您只需要以下样式

.wrapper > div { float: left; }

Answer 4

要使img div浮动到span标记的左侧，请添加此css：

.spotlight-pic {
    float: left;
}