浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动练习</title>
<style>
.test{
border: 1px solid red;
}
.page1{
display: inline-block;
float: right;
border: 1px dashed red;
}
.page2{
display: inline-block;
float: right;
border: 1px dashed red;
}
.page3{
display: inline-block;
float: right;
border: 1px dashed red;
}
</style>
</head>
<body>
<div class="test">
<div class="page1">
<img src="images/tiger.jpg" alt="老虎">
</div>
<div class="page2">
<img src="images/lion.jpg" alt="狮子">
</div>
<div class="page3">
浮动的盒子
</div>
</div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f3c176f6ebd047d2f1ebe4901ce8a359.png)