1

私はtwitterのブートストラップを使用しており、レスポンシブデザインでもあります。ブラウザー (Chrome) を縮小するか、iPhone ブラウザーで以下のコードを表示すると、テキストがすべて 1 行に表示されます。ただし、フォント サイズを 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 に答える