flex布局,在div中排列五张一样的图片,每张图片正下方依次标号1-5,图片间存在一定间距
时间: 2023-07-16 22:17:20 浏览: 54
你可以使用以下的HTML和CSS代码来实现这个效果:
HTML代码:
```html
<div class="container">
<div class="item">
<img src="image1.jpg">
<div class="label">1</div>
</div>
<div class="item">
<img src="image2.jpg">
<div class="label">2</div>
</div>
<div class="item">
<img src="image3.jpg">
<div class="label">3</div>
</div>
<div class="item">
<img src="image4.jpg">
<div class="label">4</div>
</div>
<div class="item">
<img src="image5.jpg">
<div class="label">5</div>
</div>
</div>
```
CSS代码:
```css
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
}
img {
width: 100%;
height: auto;
margin-bottom: 10px;
}
.label {
font-size: 14px;
font-weight: bold;
}
```
解释:
1. 将包含图片和标号的元素放在一个容器中,并将该容器设置为flex布局,使用justify-content: space-between;使得元素之间的间距相等。
2. 将每个元素设置为flex布局,并使其沿着垂直方向排列,使用align-items: center;让其水平居中对齐。
3. 图片宽度设置为100%,高度自适应,设置margin-bottom: 10px;使图片与标号之间有10px的间距。
4. 标号样式设置为字号14px,加粗。