IMGをより小さなIMGに置き換える方法はありますが、スタイルを台無しにすることはありません。

Question

私はC＃からHTMLコードを動的に作成しています。

私が欲しいのは、各IMG-Tagを小さなIMG-File（読み込み-gif）で置き換えることです。しかし：私はロードしていますHTML-ファイルが完全に動的で、何が含まれている可能性があるので、全体のスタイル/レイアウト（同じままにしてください

のでサンプル：。

<img alt="" src="http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/mahesh/rectangle-in-wpf/Images/RectI.gif" height="100" width="100"> 
 

 
<span>Geographie</span> 
 

 
<img alt="" src="http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/mahesh/rectangle-in-wpf/Images/RectI.gif" height="100" width="100"> 
 

 
<span>Geschichte</span> 
 

 
<img alt="" src="http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/mahesh/rectangle-in-wpf/Images/RectI.gif" height="100" width="100"> 
 

 
<span>Gesellschaft</span> 
 

 
<img alt="" src="http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/mahesh/rectangle-in-wpf/Images/RectI.gif" height="100" width="100">

いくつかの画像を1行に置き換えてください（ここでは番号3）小さい画像（ここではスマイリー）で置き換えたいのですが、同じレイアウトを使用したいのです。元の画像のサイズと同じサイズにしてから、小さな画像を作成しました。

私の問題は、次のとおりです。私はDIVを使用していたように、改行を行います...

<img alt="" src="http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/mahesh/rectangle-in-wpf/Images/RectI.gif" height="100" width="100"> 
 

 
<span>Geographie</span> 
 

 
<img alt="" src="http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/mahesh/rectangle-in-wpf/Images/RectI.gif" height="100" width="100"> 
 

 
<span>Geschichte</span> 
 

 
<div style="height: 100px; width: 100px; background-color:red;display: flex; "> 
 
    <img alt="" src="https://affinity.serif.com/forum/public/style_emoticons/default/smile.png" height="20" width="20" style="margin: auto;"> 
 
</div> 
 

 
<span>Gesellschaft</span> 
 

 
<img alt="" src="http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/mahesh/rectangle-in-wpf/Images/RectI.gif" height="100" width="100">

どのように私はこの問題を解決することができますか？

私は実際にdiv要素のデフォルトは持っているので、あなたのコンテナが改行を引き起こしている理由がある

Answer 1

...同じ次元/特性を有し、別の画像を含めることができるものとのみ - タグを置き換えるを探しています"display：block;"のスタイル

これを修正するには、表示スタイルをインラインブロックに変更します。それで、 "vertical-align：top;"で正しく整列されていることを確認します。

は、固定されたスニペットを参照してください：

<img alt="" src="http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/mahesh/rectangle-in-wpf/Images/RectI.gif" height="100" width="100"> 
 

 
<span>Geographie</span> 
 

 
<img alt="" src="http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/mahesh/rectangle-in-wpf/Images/RectI.gif" height="100" width="100"> 
 

 
<span>Geschichte</span> 
 

 
<div style="height: 100px; width: 100px; background-color:red; display: inline-block; vertical-align:top; "> 
 
    <img alt="" src="https://affinity.serif.com/forum/public/style_emoticons/default/smile.png" height="20" width="20" style="margin: auto;"> 
 
</div> 
 

 
<span>Gesellschaft</span> 
 

 
<img alt="" src="http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/mahesh/rectangle-in-wpf/Images/RectI.gif" height="100" width="100">