网页中如何将四张图片(图片长宽相同)从左到右并列排开,并给每张图片下备注文字
时间: 2024-09-24 19:28:21 浏览: 32
在网页中将四张图片从左到右并列排开,并给每张图片下备注文字,可以使用HTML和CSS来实现。具体步骤如下:
### HTML部分:
```html
<div class="image-container">
<div class="image-box">
<img src="image1.jpg" alt="Image 1">
<p>这是图片1的备注文字</p>
</div>
<div class="image-box">
<img src="image2.jpg" alt="Image 2">
<p>这是图片2的备注文字</p>
</div>
<div class="image-box">
<img src="image3.jpg" alt="Image 3">
<p>这是图片3的备注文字</p>
</div>
<div class="image-box">
<img src="image4.jpg" alt="Image 4">
<p>这是图片4的备注文字</p>
</div>
</div>
```
### CSS部分:
```css
.image-container {
display: flex;
justify-content: space-between; /* 使每个图片之间有均匀的间距 */
}
.image-box {
text-align: center; /* 让备注文字居中对齐 */
}
.image-box img {
width: 100px; /* 根据需要调整图片宽度 */
height: auto; /* 保持图片的宽高比 */
}
```
### 解释:
1. **HTML部分**:使用一个外层容器`<div class="image-container">`来包含所有的图片盒子(`<div class="image-box">`)。每个图片盒子内包含一张图片和一个段落(用于显示备注文字)。
2. **CSS部分**:
- `.image-container`:设置`display: flex;`使其内部的子元素(图片盒子)横向排列,`justify-content: space-between;`使每个图片盒子之间有均匀的间距。
- `.image-box`:设置`text-align: center;`使备注文字居中对齐。
- `.image-box img`:设置图片的宽度为100px(可以根据需要调整),高度自动以保持宽高比。