有时候,在我们进行网页设计的时候,需要将三张图片横排在一起展示。这时候,我们可以使用CSS来实现这一效果。下面的代码演示了如何使用CSS将三张图片横排: <style type= tex
有时候,在我们进行网页设计的时候,需要将三张图片横排在一起展示。这时候,我们可以使用CSS来实现这一效果。
下面的代码演示了如何使用CSS将三张图片横排:
<style type="text/css"> .img-container { width: 100%; display: flex; justify-content: space-around; } .img-container img { width: 30%; } </style> <div class="img-container"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> </div>
我们首先给img-container设置了100%的宽度,并且将display属性设置为flex,以便让其子元素横排。而justify-content属性的值设置为space-around,可以让子元素在容器内均匀分布。
接着,我们将img元素的宽度设置为30%,这样三张图就可以横排在一行内了。
通过上面的代码,我们就可以实现三张图片横排的效果了。
粉丝
0
关注
0
收藏
0