如何在 html/css 中对齐两个图像答案

【问题标题】：How to align two images in html/css如何在 html/css 中对齐两个图像
【发布时间】：2015-12-01 16:16:21
【问题描述】：

所以我有两张图片，下面有标题。我希望能够将它们并排放置。我已经尝试过 css float: 对；和显示：内联块；但我不能简单地让它工作。谢谢，麻烦您了。我是编码新手。

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<figure id="crackers1">
  <img src="crackers2.jpg" alt="missing" height="25%" width="25%" />
  <figcaption>Peppermint Thins</figcaption>
  </figure>
   <figure id="crackers2">
  <img src="crackers2.jpg" alt="missing" height="25%" width="25%" />
  <figcaption>Ritz Crackers</figcaption>
  </figure>
 </div>
</body>
</html>

【问题讨论】：

喜欢这个jsfiddle.net/hgg9h464
抱歉，更新我的小提琴..请允许几分钟。
stackoverflow.com/questions/19138758/…
是否可以使用 div span 然后看这个jsfiddle.net/hgg9h464/3
@YotZin Castrejon 检查此jsfiddle.net/hgg9h464/4

标签： html css image figure

【解决方案1】：

你有很多好的答案，这也是我的。

如果您想在同一行中添加元素，则可以使用 float 或 display:inline-block;。根据您给定的示例，请参阅此fiddle，或者如果您对 div/span 没问题，请使用此fiddle。

请确保当您使用float:left 或float:right 时，您必须在使用它们后使用clear:both，这样不会有空格问题，但display:inline-block 比浮动更好，但这取决于用户。

【讨论】：

感谢大家的出色 cmets，这对我有很大帮助。但我相信这是最好的，谢谢大家的意见。

【解决方案2】：

display: inline-block 应该可以完成这项工作。如果两个图像的高度不同，可以添加垂直对齐。

<style>
figure {
    display: inline-block;
    vertical-align: top
}
</style>

【讨论】：

抱歉，但请检查这里jsfiddle.net/hgg9h464/1您的代码不起作用..m 做错了什么？
这与我提到的那个 leo 的问题相同。它只是保持堆叠

【解决方案3】：

用css风格写如下..

#crackers1,#crackers2 {
 Display:inline-block;
  Width:50%; 
  /* do not write float when using display:inline-block.     */
}

#crackers1 img,#crackers2 img{
   Width:100%;
 }

Width:50% 将根据您的要求进行更新。希望这会有所帮助。

【讨论】：

【解决方案4】：

嗨，现在你已经习惯了，你刚刚在你的图像父级中创建了一个 div，就像这样

figure {
    display: inline-block;
    vertical-align: top;
    margin:0;
}
.imGSec{white-space:nowrap;}

figure {
    display: inline-block;
    vertical-align: top;
    margin:0;
}
.imGSec{white-space:nowrap;}

<div class="imGSec">
<figure id="crackers1">
  <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR8q3x_pFvnepIe7b7C_YeHbbHJe4n1KXKPIgldpccJY1hw3Z8z" alt="missing" height="25%" width="25%" />
  <figcaption>Peppermint Thins</figcaption>
  </figure>
   <figure id="crackers2">
  <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTdNkStSLeNk_3eAN6MV7asaOQapylITCIxs1JDOEblIc8V4eqy" alt="missing" height="25%" width="25%" />
  <figcaption>Ritz Crackers</figcaption>
  </figure>
 </div>

【讨论】：

你能分享一下为什么这些图片之间有空格吗？