qfedu-web/www/css4.html

67 lines
1.2 KiB
HTML
Raw Permalink Normal View History

2023-09-18 11:21:50 +08:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Flex自动排列</title>
<style>
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item img {
width: 400px;
height: 300px;
}
.item {
margin: 10px;
text-align: center;
}
.item img:hover {
transform: scale(1.2, 1.2);
transition: all ease-in 0.2s;
}
img-container {
overflow: hidden;
}
</style>
</head>
<body>
<div class="row">
<div class="item">
<h3>图1</h3>
<div class="img-container">
<img src="images/01.jpg" />
</div>
</div>
<div class="item">
<h3>图2</h3>
<div class="img-container">
<img src="images/02.jpg" />
</div>
</div>
<div class="item">
<h3>图3</h3>
<div class="img-container">
<img src="images/03.jpg" />
</div>
</div>
<div class="item">
<h3>图4</h3>
<div class="img-container">
<img src="images/04.jpg" />
</div>
</div>
</div>
</body>
</html>