[分享]css两行显示图片

在进行网页设计时，经常需要将图片进行排版。其中，经常出现需要将两张图片并排显示的情况。使用CSS可以轻松实现两行显示图片的效果。 上述代码使用了flex布局，将两个img标签放在一个父级div标...

在进行网页设计时，经常需要将图片进行排版。其中，经常出现需要将两张图片并排显示的情况。使用CSS可以轻松实现两行显示图片的效果。

<div style="display: flex;">
  <img src="image1.jpg" style="width: 50%; height: auto;">
  <img src="image2.jpg" style="width: 50%; height: auto;">
</div> 

上述代码使用了flex布局，将两个img标签放在一个父级div标签中，并设置其display属性为flex。接下来，将每个img标签的宽度设置为50%即可实现图片的并排显示。此时，图片会自动适应父级div的宽度，使得图片在同一行内显示。

如果想要在图片上下排列两行显示，可以简单地通过设置父级div的flex-direction属性为column来实现。代码如下：

<div style="display: flex; flex-direction: column;">
  <img src="image1.jpg" style="width: 100%; height: auto;">
  <img src="image2.jpg" style="width: 100%; height: auto;">
</div> 

通过设置flex-direction为column，两个img标签会依次排列在父级div的上下两行中。同样地，每个img标签的宽度可以设置为100%，使得图片自适应父级div的宽度。

总之，以上两行显示图片的方法只是实现图片排版的方法之一。在实际制作过程中，视情况而定，可以选择不同的方法来达到自己所期望的效果。