如何用較小的IMG替換IMG，但不會搞亂樣式

Question

我正在動態創建C＃外的HTML代碼。

我想要的是：用一個更小的IMG文件（這是一個加載gif）替換每個IMG標籤。但是：整體風格/佈局應保持不變（因爲我加載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">

幾個現在我想用一個較小的圖像（這裏：一個笑臉）替換其中的一個（這裏是：數字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">

我該如何解決這個問題？

我真的要尋找的東西，具有相同的尺寸/性能，並且可以包含其他圖像只更換-tag ...

Answer 1

的原因，您的容器造成線路中斷是因爲默認的div有一種「顯示：塊」的風格

您可以通過將顯示樣式更改爲內聯塊來解決此問題。然後，您需要確保它與「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">