如何在 html/css 中对齐两张图片

Question

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

<!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>

Answer 1

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

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

Answer 2

写成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% 将根据您的要求进行更新。希望这对您有所帮助。

Answer 3

你好，现在已经习惯了，你刚刚在你的图像父级中创建了一个 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>

Answer 4

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

如果你想元素在同一行，那么你可以使用 float 或 display:inline-block;。根据您给出的示例，请参阅此 fiddle or if you are ok with div/span then go with this fiddle.

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

如何在 html/css 中对齐两张图片

How to align two images in html/css

html

css

image

figure