如何用较小的IMG替换IMG，但不会弄乱样式

Question

我正在动态地创建C＃的HTML代码。

我想要的是：用较小的IMG文件替换每个IMG-TAG(这是加载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">

连续几张图像。现在，我想用一个较小的图像(在这里：笑脸(替换其中一个(这里：数字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">

我该如何解决？

我真的正在寻找仅替换具有相同维度/属性的东西，并且可以包含另一个图像...

Answer 1

您的容器引起换行线的原因是因为div默认值具有" display：block;"的样式。

您可以通过将显示样式更改为Inline Block来解决此问题。然后，您将要确保与"垂直隔离：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">