如何讓這些文本顯示爲內聯？

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