帮我写一个代码让两张图片实行左右对齐排列
时间: 2023-08-28 13:12:48 浏览: 105
图片排列代码
3星 · 编辑精心推荐
好的,这里提供一种简单的方法,使用HTML和CSS实现两张图片左右对齐排列的效果:
HTML代码:
```html
<div class="image-container">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
</div>
```
CSS代码:
```css
.image-container {
display: flex;
justify-content: space-between;
}
.image-container img {
max-width: 50%;
}
```
解释:
- 我们使用一个 `div` 元素来包裹两个图片;
- 给 `div` 元素设置 `display: flex;` 属性,让两个图片成为它的子元素,并且采用弹性盒子布局;
- 使用 `justify-content: space-between;` 属性让两个图片左右对齐排列;
- 最后,给图片设置 `max-width: 50%;` 属性,让它们最大占据父元素的一半宽度。
这样就可以实现两张图片左右对齐排列的效果了。希望可以帮到你。
阅读全文