CSS是网页设计中必不可少的一个元素。它可以改变网页的样式,让它看起来更加美观和专业。下面介绍一种使用CSS让两张图片上下排列的方法。/*CSS代码*/ .image-container { disp
CSS是网页设计中必不可少的一个元素。它可以改变网页的样式,让它看起来更加美观和专业。下面介绍一种使用CSS让两张图片上下排列的方法。
/*CSS代码*/ .image-container { display: flex; flex-direction: column; justify-content: center; align-items: center; } .image-container img { width: 100%; height: auto; }
上面的CSS代码中,我们使用了flex布局,将容器的方向设置成列(flex-direction: column),并使图片水平和垂直居中(justify-content: center; align-items: center;)。接下来再通过设置图片的宽度为100%和高度自适应,就可以让两张图片垂直排列,而且分别占据容器内的一半。
上述代码中,我们使用了一个div元素作为容器,并且给它添加了一个名为“image-container”的class属性。在容器内,我们分别插入了两张图片,并将它们的路径设置为本地目录下的“image1.jpg”和“image2.jpg”。最终的效果如下:
通过这种方法,我们可以轻松实现图片的上下排列,而且布局灵活、动态。如果你的网页设计中需要图片垂直排列,可以考虑使用这种方法。
粉丝
0
关注
0
收藏
0