html图片排版源代码
时间: 2023-07-08 14:46:09 浏览: 55
以下是一个简单的HTML图片排版示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>图片排版示例</title>
<style>
img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.item {
flex-basis: 30%;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<img src="image1.jpg" alt="图片1">
</div>
<div class="item">
<img src="image2.jpg" alt="图片2">
</div>
<div class="item">
<img src="image3.jpg" alt="图片3">
</div>
<div class="item">
<img src="image4.jpg" alt="图片4">
</div>
<div class="item">
<img src="image5.jpg" alt="图片5">
</div>
<div class="item">
<img src="image6.jpg" alt="图片6">
</div>
</div>
</body>
</html>
```
注释:
- `display: block;`将图片转换为块级元素,可以设置宽度和高度。
- `margin: 0 auto;`将图片居中对齐。
- `max-width: 100%; height: auto;`将图片的宽度最大限制为其容器的宽度,并保持其高度比例。
- `.container`是一个父容器,使用Flex布局。
- `flex-wrap: wrap;`启用自动换行,当子元素不能在一行中适合时。
- `justify-content: center;`将子项水平居中。
- `.item`是一个子容器,使用Flexbox设置宽度和边距。