用html实现三个图片并列在右上角
时间: 2024-03-11 10:49:42 浏览: 18
好的,以下是一个简单的HTML代码示例,实现三个图片并列在右上角:
```html
<!DOCTYPE html>
<html>
<head>
<title>三个图片并列在右上角</title>
<style>
.container {
position: relative;
width: 400px;
height: 400px;
background-color: #ccc;
}
.image {
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
background-size: cover;
background-position: center;
margin: 10px;
}
.image1 {
background-image: url('image1.jpg');
}
.image2 {
background-image: url('image2.jpg');
top: 110px;
}
.image3 {
background-image: url('image3.jpg');
top: 220px;
}
</style>
</head>
<body>
<div class="container">
<div class="image image1"></div>
<div class="image image2"></div>
<div class="image image3"></div>
</div>
</body>
</html>
```
在这个例子中,我们使用了CSS的`position`属性来控制图片的位置,并使用`background-image`属性来设置图片。我们还使用了`background-size`属性和`background-position`属性来控制图片的大小和位置。同时,我们使用了`margin`属性来设置图片之间的间距。