html两张图片并排放置间距
时间: 2024-10-17 17:04:13 浏览: 34
TimedPictureSelection:句子展开时并排显示两张图片
在HTML中,如果你想将两张图片并排放置并且有一定间距,你可以使用`<div>`标签包裹图片,并设置一些CSS样式。下面是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.container {
display: flex;
justify-content: space-between; /* 控制图片之间的间距 */
}
.image-item {
width: 45%; /* 根据实际需求调整宽度 */
margin-right: 10px; /* 图片间的右边距 */
margin-bottom: 10px; /* 图片底部间距 */
box-sizing: border-box; /* 确保内边距撑开容器 */
}
/* 如果需要自适应布局,可以添加 max-width 和 height 属性 */
.image-item img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="image-item">
<img src="图片1链接" alt="图片1描述">
</div>
<div class="image-item">
<img src="图片2链接" alt="图片2描述">
</div>
</div>
</body>
</html>
```
在这个例子中,`.container` 使用了 `display: flex` 来创建弹性布局,`justify-content: space-between` 使得两个 `.image-item` 之间有均匀的间距。每个图片项(`.image-item`)包含一张图片,设置了固定宽度和右侧及底部的间距。
阅读全文