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

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

将图像浮动到左侧。

作为一个侧面说明，这是非常奇怪，在投入文本的那些行span元素（和br s到分开）而不是说，h2用户名和p为休息。

See what it looks like.

Answer 2

尝试浮动.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 3

退房this jsFiddle。如果您在div包裹内容的其他块（图像外），那么你只需要下面的样式

.wrapper > div { float: left; } 

Answer 4

要到左浮动跨度标签的IMG的div添加这个CSS：

.spotlight-pic { 
    float: left; 
}