如何讓文字在圖片旁邊而不是在圖片下方？

我使用twitter bootstrap，它也是響應式設計。當我縮小瀏覽器（Chrome）或在我的iPhone瀏覽器中查看下面的代碼時，文本全部出現在一行上。但是，當我將字體大小增加到20像素時，文字會在圖像下面進行換行。我可以做些什麼才能讓文本（當它是兩行長）出現在圖標/圖像的右側，而不是包在它下面？如何讓文字在圖片旁邊而不是在圖片下方？

  <div class = 'row'> 
       <img src = "http://a286.phobos.apple.com/us/r1000/113/Purple2/v4/a2/b1/40/a2b14050-c4be-4243-2cad-7dc1fcaec726/mzl.vkophohs.png" style = "width:60px;"> 
        <span style = "font-size:18px;">The Hobbit: Kingdoms of Middle-earth<br /></span> 
      </div>

來源

2013-04-03 sharataka

我會做同樣的聶但有一點不同：

http://jsfiddle.net/gkxz4/

<div class = 'row'> 
<div class="col_image">  
<img src = "http://a286.phobos.apple.com/us/r1000/113/Purple2/v4/a2/b1/40/a2b14050-c4be-4243-2cad-7dc1fcaec726/mzl.vkophohs.png" style = "width:60px;"> 
</div> 
<div class="col_text">The Hobbit: Kingdoms of Middle-earth</div> 
</div> 

.row { width:400px; overflow:hidden; } 
.col_image { float:left; width:60px; margin:0 20px 0 0; } 
.col_text {float:left; width:320px; font-size:18px;}

來源

2013-04-03 18:49:26 Lowkase

<div class="row"> 
<img src="http://a286.phobos.apple.com/us/r1000/113/Purple2/v4/a2/b1/40/a2b14050-c4be-4243-2cad-7dc1fcaec726/mzl.vkophohs.png" style="width:60px;float:left;"> 
<div style="float:left;">The Hobbit: Kingdoms of Middle-earth<br/></div> 
</div>

來源

2013-04-03 18:34:09 fakemeta

<div class = 'row'> 
<img src = "http://a286.phobos.apple.com/us/r1000/113/Purple2/v4/a2/b1/40/a2b14050-c4be-4243-2cad-7dc1fcaec726/mzl.vkophohs.png" style = "width:60px; float:left; padding-bottom:30px;"> 
<span style = "font-size:20px; vertical-align:middle; line-height: 30px; ">The Hobbit: Kingdoms of Middle-earth<br /></span> 
</div>

來源

2013-04-03 18:45:03

錯過了某事，它現在是好的。 – 2013-04-03 18:51:15

如何讓文字在圖片旁邊而不是在圖片下方？

回答

相關問題