如何在 HTML 中并排放置两张或多张图片？

Question

假设我有 2 张图片，我想将它们并排放置，并在它们之间留出一些空格，我该怎么做？我听说了一些关于浮动的事情？它是什么以及我如何使用它？can/would

Answer 1

我想你的意思是否则它们会堆叠在彼此的上方和下方？将两张图片向左浮动 float:left;，如果你想在它们之间留出空隙，请使用 Margin or Padding.

Answer 2

通常图像会向左浮动，因此正如 nicael 指出的那样，您可以将它们并排放置。或者您可以使用第一个答案中所述的 style="float:left;" 。另一方面，图像元素有一个很好的对齐属性，它允许以这种方式进行操作：

<p>Some Text above</p>
<img src="http://urlref.at/images/3o.gif" align="left" />
<img src="http://urlref.at/images/3o.gif" align="left" />
<img src="http://urlref.at/images/3o.gif" />
<p>Some Text underneath</p>

那么你就不会在最后一张图片中左对齐，这样文本就会在图片下方而不是图片旁边。

到Space图像你可以使用vspace和hspace属性：

<p>Some Text above</p>
<img src="http://urlref.at/images/3o.gif" align="left" hspace="20" />
<img src="http://urlref.at/images/3o.gif" align="left" hspace="20" />
<img src="http://urlref.at/images/3o.gif" hspace="20" />
<p>Some Text underneath</p>

更简洁但更复杂的是使用普通 CSS 样式。

如何在 HTML 中并排放置两张或多张图片？

How do I put two or more images side by side in HTML?

css

html

css-float