1

我正在使用 twitter 引导程序，它也是响应式设计。当我缩小浏览器（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>
4

3 回答 3

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;}
于 2013-04-03T18:49:26.450 回答
0 
<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-03T18:34:09.450 回答
0 
<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-03T18:45:03.103 回答