具体对齐问题答案

【问题标题】：Specific alignment issues具体对齐问题
【发布时间】：2019-06-11 05:16:16
【问题描述】：

我正在建立一个学校项目，它是一个图片库，我正在尝试让图像专门对齐，但我不知道如何。帮助。

我尝试了基本的右、左和上对齐，但它不起作用。

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

我希望第三张图片位于第二张图片下方，并且我希望第三张图片与第二张图片大小相同。

【问题讨论】：

标签： html css image alignment

【解决方案1】：

您好，我已使用display:flex 将其置于 1 行。下面是链接。

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

如果您需要查看更多关于 flex 框的信息，请查看下面的链接。谢谢

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

【讨论】：

虽然理论上这可以回答这个问题，it would be preferable 在这里包含答案的基本部分，并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效

【解决方案2】：

HTML5 不再支持

align。在这种特定情况下，如果您指定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 -->

【讨论】：