这是我当前的代码：如何在html中并排放置2个图像？
<figure class="half">
<img style="width:400px" src="http://alexmarshall12.github.io/assets/img/colored_1693146.png">
<img style="width:600px" src="http://alexmarshall12.github.io/assets/img/one-piece-1693146_colored2.png">
<figcaption>Caption describing these two images.</figcaption>
</figure>
可惜也许是因为图像是太宽，但仍把下一行的第二图像。我想避免这种情况 - 不管事情有多宽。我怎样才能做到这一点？
你的情况身影只需添加CSS display:flex到图像的父容器。
<figure class="half" style="display:flex">
<img style="width:400px" src="http://alexmarshall12.github.io/assets/img/colored_1693146.png">
<img style="width:600px" src="http://alexmarshall12.github.io/assets/img/one-piece-1693146_colored2.png">
<figcaption>Caption describing these two images.</figcaption>
</figure>我建议只使用<span>标签，并在它们之间没有空间，然后它们并排。
这可以通过多种方式实现。 你可以使用Flexbox的 https://css-tricks.com/snippets/css/a-guide-to-flexbox/
你可以网格系统，并设置图像宽度包裹，100％或创建表，每个TD的设置宽度为50％
你甚至可以设置CSS为您的所有图像的尺寸完全相同。
你可以把你的图片放入表格单元格中。
<figure class="half">
<table>
<tr>
<td>
<img style="width:400px;" src="http://alexmarshall12.github.io/assets/img/colored_1693146.png">
</td>
<td>
<img style="width:600px;" src="http://alexmarshall12.github.io/assets/img/one-piece-1693146_colored2.png">
</td>
</tr>
</table>
<figcaption>Caption describing these two images.</figcaption>
</figure>我为您创建了https://jsfiddle.net/7kophdxq/一点小提琴。
我强烈建议使用flexbox，因为它是做这些事情的'新途径'。当然你可以使用表格，但它不是表格数据的权利？
对于通式结构：
<div class="columns">
<div class="columns__item"></div>
<div class="columns__item"></div>
</div>
每个columns__item具有50％的宽度。里面每个columns__item我已经把一个小图片（并确保它不会超过其容器的100％的宽度）：
<figure>
<img src="http://lorempixel.com/400/400/" />
<figcaption>Image caption</figcaption>
</figure>
希望它能帮助！
.half img {
display:inline-block;
}
.half figcaption {
display:block
}
，或者，如果你想保持图像的一条线，不管容器的大小：
.half {
white-space:nowrap;
}
.half img {
display:inline;
}
.half figcaption {
display:block
}
选择任何你最适合;）
只要把两张图片在两个部门，并把这两个师在一个主要部门。使用float：left并排放置 –
如果你想在每一个可能的屏幕尺寸上并排放置图像，你可以这样做：https：//jsfiddle.net/zvv38vup/1/无论如何，我宁愿使用较低屏幕分辨率的媒体查询，并将一个放在另一个之上（对于较低的屏幕尺寸） – sinisake