Html 如何让这些文本以内联方式显示？

我有这样的设计：

目前，所有的东西都被包裹在这个黑色背景的矩形中。图片和每个文本字符串都在它自己的类中。文本以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;
}

佩特罗内拉

克维纳，乌普斯萨拉耶22år

嘿！！杰格·赫特·彼得罗内拉~~~
.包装纸{
位置：相对位置；
浮动：左；
宽度：420px；
填充：15px；
}
图{
位置：相对位置；
宽度：164px；
高度：128px；
}
.用户名{
位置：相对位置；
}
.info{
位置：相对位置；
字体大小：粗体；
}
.描述{
位置：相对位置；
}

---

感谢您的帮助。

将图像向左浮动

作为旁注，将这些文本行放在

span

元素中（和

br

s分开）而不是，比如说，用户名是

h2

，其余的是

p

，这是非常奇怪的

---

将图像向左浮动

作为旁注，将这些文本行放在

span

元素中（和

br

s分开）而不是，比如说，用户名是

h2

，其余的是

p

，这是非常奇怪的

---

尝试将

聚光灯图片浮动到左侧：

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


佩特罗内拉

克维纳，乌普斯萨拉耶22år

嘿！！杰格·赫特·彼得罗内拉~~~
.包装纸{
位置：相对位置；
浮动：左；
宽度：420px；
填充：15px；
}
.聚光灯图片{
位置：相对位置；
宽度：164px；
高度：128px；
}
.用户名{
位置：相对位置；
}
.info{
位置：相对位置；
字体大小：粗体；
}
.描述{
位置：相对位置；
}
.聚光灯图片{
浮动：左；
右边距：15px；
}
尝试将
聚光灯图片浮动到左侧：

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


佩特罗内拉

克维纳，乌普斯萨拉耶22år

嘿！！杰格·赫特·彼得罗内拉~~~
.包装纸{
位置：相对位置；
浮动：左；
宽度：420px；
填充：15px；
}
.聚光灯图片{
位置：相对位置；
宽度：164px；
高度：128px；
}
.用户名{
位置：相对位置；
}
.info{
位置：相对位置；
字体大小：粗体；
}
.描述{
位置：相对位置；
}
.聚光灯图片{
浮动：左；
右边距：15px；
}
退房。如果将另一块内容（图像外部）包装在
div
中，则只需要以下样式

.wrapper > div { float: left; }

退房。如果将另一块内容（图像外部）包装在
div
中，则只需要以下样式

.wrapper > div { float: left; }

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

.spotlight-pic {
    float: left;
}

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

.spotlight-pic {
    float: left;
}