html图片排列布局下面字_div+css图片列表布局（一）

对于这个问题，我可以为您提供一些基本的布局思路和代码示例。

首先，HTML中的图片排列布局可以通过使用`<div>`和`<img>`标签来实现。例如，以下代码将显示两张图片并排排列：

<div>
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
</div>

接下来，您可以添加一个包含文本的`<div>`元素以创建图像下方的文本行。例如：

<div>
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <div>这里是文本内容</div>
</div>

然后，使用CSS中的`display: flex`属性可以将图像和文本行水平排列。例如：

div {
  display: flex;
  flex-wrap: wrap;
}
img {
  width: 50%;
}
div:last-child {
  width: 100%;
  text-align: center;
}

在这个示例中，`display: flex`属性将`<div>`元素中的所有子元素放置在一个水平行中。`flex-wrap: wrap`属性可确保图像在窄屏幕上正确缩放。`img`元素的`width: 50%`属性使它们平均分配`<div>`元素的宽度。最后，`div:last-child`元素的`width: 100%`属性和`text-align: center`属性将文本行扩展到完整宽度并居中对齐。

对于CSS图片列表布局，您可以使用`<ul>`和`<li>`元素来实现。例如：

<ul>
  <li><img src="image1.jpg" alt="Image 1"></li>
  <li><img src="image2.jpg" alt="Image 2"></li>
  <li><img src="image3.jpg" alt="Image 3"></li>
</ul>

然后，使用CSS中的`display: flex`和`flex-wrap: wrap`属性可以将图像放置在一个水平行中并确保它们在窄屏幕上正确缩放。例如：

ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
}
li {
  width: 33.33%;
  padding: 10px;
  box-sizing: border-box;
}
img {
  width: 100%;
}

在这个示例中，`display: flex`属性将`<ul>`元素中的所有`<li>`元素放置在一个水平行中。`flex-wrap: wrap`属性可确保图像在窄屏幕上正确缩放。`padding: 0`和`margin: 0`属性可将`<ul>`元素的内部和外部间距设置为零。`list-style: none`属性可移除`<ul>`元素的默认列表样式。`li`元素的`width: 33.33%`属性可使每个图像平均分配`<ul>`元素的宽度，`padding: 10px`和`box-sizing: border-box`属性可确保图像周围有一定的间距。最后，`img`元素的`width: 100%`属性可使其填充其容器的宽度。

希望这些示例能帮助您实现所需的布局。