首先,大家需要在 HTML 中添加两张图片的标签,为了方便,大家可以使用 img 标签:
<img src="first.jpg"> <img src="second.jpg">
接下来,在 CSS 中,大家需要设置两张图片的样式,利用 display 属性使它们上下排列:
img { display: block; /* 将图片变成块级元素,方便排列 */ margin: 10px auto; /* 控制图片之间的距离 */ }
代码中,大家将 img 元素设置为 block 层级元素,这样它们就变成了块级元素,可以占据整个父元素的宽度。而 margin 的值则控制着两张图片之间的距离。
通过上述代码,大家就成功地将两张图片上下排列了。如果需要更进一步的排版,还可以使用 flexbox 或者 grid 等布局技术。