Конкретные проблемы выравнивания

Question

Я настраиваю школьный проект, это галерея изображений, и я пытаюсь заставить изображения точно выравнивать, но я не знаю как. Помощь.

Я пробовал базовое выравнивание вправо, влево и вверх, но это не работает.

<img src="https://www.dike.lib.ia.us/images/sample-1.jpg/image" width="980" height="620">
<img src="https://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" width="500" height="300" align="top">
<img src="https://northbridgecos.com/wp-content/uploads/2016/01/sample4_l.jpg" width="500" height="300" align="right">
<!-- Line trying to fix -->

Я хочу, чтобы 3-е изображение переместилось под 2-е изображение, и я хочу, чтобы 3-е изображение было размером с 2-е.

Answer 1

Привет, я использовал display:flex, чтобы вывести его на 1 строку. ниже ссылка.

https://jsfiddle.net/4rL7jnuc/1/888

если вам нужно больше узнать о гибкой коробке, проверьте ссылку ниже. Спасибо

https://www.w3schools.com/cssref/css3_pr_flex.asp

Answer 2

align больше не поддерживается в HTML5. В этом конкретном случае изображения должны выровняться правильно, если указать единицы измерения width и height (например, px).

<img src="https://www.dike.lib.ia.us/images/sample-1.jpg/image" width="980px" height="620px">
<img src="https://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" width="500px" height="300px">
<img src="https://northbridgecos.com/wp-content/uploads/2016/01/sample4_l.jpg" width="500px" height="300px"> <!-- Line trying to fix -->