我的思路是用div可是一行只能显示一个图片，我想实现三行四列的图片排列
```HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面</title>
<style>
.tupian {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.tp {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class "tupian">
<div class "tp">
<a href=".php">
<img src="xxx.jpg" width="300px" height="400px">
</a>
</div>
<br>
<tr><a href="xxx.php">xxx</a></tr>
<div class "tp"></div>
<a href="xxx.php">
<img src="xxx.jpg" width="300px" height="400px">
</a>
</div>
<br>
<tr><a href="xxx.php">xxx</a></tr>
<div class "tp"></div>
<a href="xxx.php">
<img src="xxx.jpg" width="300px" height="400px">
</a>
</div>
<br>
<tr><a href="xxx.php">xxx</a></tr>
<div class "tp"></div>
<a href="xxx.php">
<img src="xxx.jpg" width="300px" height="400px">
</a>
</div>
<br>
<tr><a href="xxx.php">xxx</a></tr>
</div>
</body>
</html>
```
要实现三行四列的图片排列，可以使用HTML和CSS来创建一个包含12个图片的网格布局。
以下是一个最基本的示例代码，您可以根据需要进行调整：
<div class="grid-container">
<div class="grid-item"><img src="image1.jpg"></div>
<div class="grid-item"><img src="image2.jpg"></div>
<div class="grid-item"><img src="image3.jpg"></div>
<div class="grid-item"><img src="image4.jpg"></div>
<div class="grid-item"><img src="image5.jpg"></div>
<div class="grid-item"><img src="image6.jpg"></div>
<div class="grid-item"><img src="image7.jpg"></div>
<div class="grid-item"><img src="image8.jpg"></div>
<div class="grid-item"><img src="image9.jpg"></div>
<div class="grid-item"><img src="image10.jpg"></div>
<div class="grid-item"><img src="image11.jpg"></div>
<div class="grid-item"><img src="image12.jpg"></div>
</div>
CSS部分：
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.grid-item {
display: flex;
justify-content: center;
align-items: center;
}
上面的代码将12个图片放入一个包含grid-container类的div元素中。通过设置grid-template-columns: repeat(4, 1fr);，我们将网格布局分为四列。grid-gap属性用于在网格项之间创建间距。
接下来，为了让图片居中，我们设置了每个包含图片的div元素的display属性为flex，并使用justify-content和align-items属性将图片在该元素内居中显示。
可以将标签中的src属性替换为您想要使用的实际图片的文件路径。如果您要调整网格的大小或间距，请尝试更改CSS中的属性值。