CSS可以非常方便地实现多组图片并排显示。在下面的例子中,我们将使用CSS中的float属性和margin属性来实现这个效果。
/* 定义一个容器来包含多组图片 */ .container { overflow: hidden; } /* 定义每一组图片 */ .img-group { float: left; margin-right: 20px; } /* 清除浮动 */ .clearfix:after { content: ""; clear: both; display: block; } /* 使用HTML来显示组图片 */ <div class="container clearfix"> <div class="img-group"> <img src="image1.jpg" alt="图片1"> <img src="image2.jpg" alt="图片2"> <img src="image3.jpg" alt="图片3"> </div> <div class="img-group"> <img src="image4.jpg" alt="图片4"> <img src="image5.jpg" alt="图片5"> <img src="image6.jpg" alt="图片6"> </div> </div>
在上面的代码中,我们使用了一个容器来包含多组图片。每组图片都被定义为一个独立的div,并设置了float属性来让它们并排显示。我们也增加了一些外边距(margin)来让每组之间有一定的间隔。
为了避免浮动时发生问题,我们也加入了一个clearfix类来清除浮动。 clearfix类是一个用来清除浮动的常用技巧,它会在每组图片的后面插入一个空白元素,让容器能够自动适应高度。
使用上面的代码,您可以轻松地实现多组图片并排显示的效果。您也可以通过修改样式来改变每组图片的大小和间距。