html9张图片排列布局
时间: 2023-07-06 22:41:57 浏览: 171
JS可拖拽图片网格排列布局代码
HTML中9张图片排列布局可以使用CSS中的display属性和float属性来实现。以下是一个例子:
HTML代码:
```
<div class="image-gallery">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
<img src="image5.jpg">
<img src="image6.jpg">
<img src="image7.jpg">
<img src="image8.jpg">
<img src="image9.jpg">
</div>
```
CSS代码:
```
.image-gallery {
width: 100%;
}
.image-gallery img {
width: 30%;
margin: 2%;
float: left;
}
.image-gallery img:nth-child(3n+1) {
clear: left;
}
```
以上代码将九个图片平均分配到容器的宽度中。每个图片占据30%的宽度,之间有2%的间距,并且都向左浮动。其中通过:nth-child选择器设置第1、4、7张图片清除浮动。您可以根据需要调整CSS样式来实现不同的布局。
阅读全文