CSSスプライトとして使用するために、DIVをIMGのように動作させるにはどうすればよいですか？

Question

ページ内のIMGタグに基づいて自動的にCSSスプライトを作成し、適切なパーツが透けて見えるようにスプライト画像を背景として配置するための適切なCSSを備えたDIVに置き換えるコードを記述しました-問題は、DIVをIMGのドロップイン代替品として動作させることができないことです。

デフォルトの「表示」値を「ブロック」に設定したままにすると、元のIMGがテキストの最後に配置された場合、置換DIVはテキストの後の次の行にジャンプします（もちろん、 display：block to do）で何かを期待します。

「表示」をインラインに変更すると、DIVはテキストと同じ行に残りますが、設定した「幅」と「高さ」を無視して折りたたまれます。 DIV内に＆nbsp;を配置しようとしましたが、nbspを含めるのに十分な幅しか使用しません。

すべての可能な値（「table-row」、「run-in」、「compact」などの＆quot; obscure＆quot;を含む）への表示の設定を試してみましたが、すべて運がありません。 IMGと同じレイアウト動作でDIVを作成することも可能ですか？

単一のDIVよりも複雑なものを用意していますが、明らかなことを試みました（内側のDIVがdisplay：ブロックで、外側のsetがdisplay：inlineに設定されている別のDIV内にあるDIVしかし、そこで機能する組み合わせは見つかりませんでした。

置き換えられたIMG / DIVの外で必要なレイアウトを取得するためにできることは常にありますが、私の目標は、HTMLの残りの部分に関係なく機能する汎用の自動CSSスプライトメカニズムを持つことです。

Answer 1

display：inline-block; を試しましたか？

また、 display：-moz-inline-block;を使用する必要がある場合があります。 firefox2の場合

Answer 2

画像には、「display：inline-block」に相当するものがあります。これはもともとCSSに含まれていませんでしたが、画像がこのように動作するという事実に対処するために一部追加されました。

問題は、すべてのブラウザーがサポートしていることです。 1年前からのブラウザをサポートしたい場合、行き詰まっています。

別の、ただしそれほど優れていない解決策は、divをフローティングにすることです（＆quot; float：left＆quot;）。

  

inline-block ：CSS 2.1で導入されました。これにより、要素は、単一のインラインボックスであるかのように周囲のコンテンツとともに流れるブロック要素ボックスを生成します（置換された要素[画像を意味する]のように振る舞う）。

ソースMozilla Developer Center

Answer 3

Display：inline-blockはこの状況で機能するはずです。試しましたか？