這是我當前的代碼：如何在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