横並びの画像で、ブラウザの幅を縮めても、二段にならない方法は？

質問

よろしくお願いします。

下記のように書いて、画像を横並びにしています。
ただ、ブラウザの幅を縮めると、二段になっていまいます。
幅を縮めても、一段のまま保持するには、どのように書けば良いでしょうか？

<img src="aa1.gif" width="100px" height="100px'>
<img src="aa2.gif" width="100px" height="100px'>
<img src="aa3.gif" width="100px" height="100px'>
<img src="aa4.gif" width="100px" height="100px'>

回答No.3

神崎 渉瑠（@taloo）

width="100"とheight="100"は単位なし、style="width:100px;height:100px;"の時は単位ありです。
あと、シングルクォーテーションじゃなくて、ダブルクォーテーションということと、
alt属性必須です。

方法はいろいろありますが、まだ出てない方法でテーブルを使うとこんな感じ。
<table>
<tbody>
<tr>
<td><img src="aa1.gif" alt="" width="100" height="100"></td>
<td><img src="aa2.gif" alt="" width="100" height="100"></td>
<td><img src="aa3.gif" alt="" width="100" height="100"></td>
<td><img src="aa4.gif" alt="" width="100" height="100"></td>
</tr>
</tbody>
</table>

回答No.2

naokita

外枠で幅設定をする。　ここを幅合計数値以上にする。
　　　　　　　　　↓　↓　↓
<div style="width: 410px;">
<img src="aa1.gif" width="100px" height="100px">
<img src="aa2.gif" width="100px" height="100px">
<img src="aa3.gif" width="100px" height="100px">
<img src="aa4.gif" width="100px" height="100px">
</div>
------------------------------------

img が
height="100px'　になっているけど
height="100px"　に統一しましょう。

<img src="aa1.gif" width="100px" height="100px"><img src="aa2.gif" width="100px" height="100px">
上記のように一列に書く場合と下記のように改行する場合は隙間が違う。
<img src="aa1.gif" width="100px" height="100px">
<img src="aa2.gif" width="100px" height="100px">

回答No.1

steel_gray

囲っている要素にスタイル(white-space:nowrap)を付ける
http://www.htmq.com/style/white-space.shtml
preで囲う
http://www.htmq.com/html/pre.shtml
nobrで囲う
http://www.htmq.com/html/nobr.shtml
検証はしてません。