前端两张图片平铺且左右有空隙css怎么写
时间: 2024-09-20 09:17:31 浏览: 13
你可以使用CSS的`display: flex;`属性以及一些间距相关的属性来实现这个效果。下面是一个简单的示例,假设你要将两个图片水平居中并保持一定空隙:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.container {
display: flex;
justify-content: center; /* 居中 */
}
.item {
flex: 0 0 auto; /* 确保每个项目占据一行空间 */
margin-right: 15px; /* 右侧空隙,可以调整数值 */
box-sizing: border-box; /* 包含内边距和边框在元素尺寸计算中 */
}
/* 如果你想让图片完全平铺(无间隙),只需要删除 margin-right */
/* .item { ... } 就好了 */
</style>
</head>
<body>
<div class="container">
<img src="image1.jpg" alt="图片1" class="item">
<img src="image2.jpg" alt="图片2" class="item">
</div>
</body>
</html>
```
在这个例子中,`.container`设置了`flex-direction: row;`来使其成为行方向的Flex布局。`.item`应用了`flex: 0 0 auto`来保证每个图片独占一列,并设置右侧margin为15px来创建空隙。