Question

我正在使用twitter bootstrap，它也是响应式设计。当我缩小浏览器（Chrome）或在我的iPhone浏览器中查看以下代码时，文本全部显示在一行上。但是，当我将字体大小增加到20px时，文本会在图像下方包装。我可以做些什么才能让文字（当它长2行时）显示在图标/图像的右侧而不是包裹在它下面？

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

Answer 1

我会像Nik一样，但有点不同：

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

Answer 2

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

Answer 3

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

如何将文本包装在图像旁边而不是在图像下面？

3 个答案: