如何用较小的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">