通过 CSS 内联显示图像

Posted 2023-03-05

【中文标题】通过 CSS 内联显示图像

【英文标题】：Display Images Inline via CSS

【发布时间】：2012-10-27 02:57:36

【问题描述】：

我想在一行中并排显示三张图片。

这是 html：

<div id="client_logos">
<img style="display: inline; margin: 0 5px;" title="heartica_logo" src="https://s3.amazonaws.com/rainleader/assets/heartica_logo.png"    />
<img style="display: inline; margin: 0 5px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/mouseflow_logo.png"    />
<img style="display: inline; margin: 0 5px;" title="piiholo_logo" src="https://s3.amazonaws.com/rainleader/assets/piiholo_logo.png"    />
</div>

这是 CSS：

#client_logos  display: inline-block; 

由于某种原因，它只显示两个并排的徽标。不知道出了什么问题。有什么想法吗？

网址：http://rainleader.com/who-we-are/

见截图。

【参考方案1】：

您在标记的第二个和第三个图像之间有一个换行符<br>。摆脱它，它会显示内联。

【讨论】：

如有疑问，请打开您的网络检查器。 :) 很高兴我能帮上忙。

别担心...我被跟踪了。谢谢！

【参考方案2】：

您在此处发布的代码和您网站上的代码都不同。第二张图片后有一个中断<br>，所以第三张图片换行，删除这个<br>，它会正确显示。

【参考方案3】：

把这个css放在你的页面中：

<style>
   #client_logos 
    display: inline-block;
    width:100%;
    
  </style>

替换

<p><img class="alignnone" style="display: inline; margin: 0 10px;" title="heartica_logo" src="https://s3.amazonaws.com/rainleader/assets/heartica_logo.png"    /><img class="alignnone" style="display: inline; margin: 0 10px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/mouseflow_logo.png"    /><img class="alignnone" style="display: inline; margin: 0 10px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/piiholo_logo.png"    /></p>

到

<div id="client_logos">
<img style="display: inline; margin: 0 5px;" title="heartica_logo" src="https://s3.amazonaws.com/rainleader/assets/heartica_logo.png"    />
<img style="display: inline; margin: 0 5px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/mouseflow_logo.png"    />
<img style="display: inline; margin: 0 5px;" title="piiholo_logo" src="https://s3.amazonaws.com/rainleader/assets/piiholo_logo.png"    />
</div>