1.初始布局
import React from 'react';
import './index.css';
function HeightFall() {
return (
<div className="container">
<div className="image-item">
<img src="./images/1.png" alt=""></img>
</div>
<div className="image-item">
<img src="./images/2.png" alt=""></img>
</div>
<div className="image-item">
<img src="./images/3.jpg" alt=""></img>
</div>
<div className="image-item">
<img src="./images/1.png" alt=""></img>
</div>
<div className="image-item">
<img src="./images/2.png" alt=""></img>
</div>
<div className="image-item">
<img src="./images/3.jpg" alt=""></img>
</div>
<div className="image-item">
<img src="./images/1.png" alt=""></img>
</div>
<div className="image-item">
<img src="./images/2.png" alt=""></img>
</div>
</div>
);
}
export default HeightFall;
.container {
display: flex;
flex-wrap: wrap;
}
.image-item {
height: 200px;
margin: 5px;
}
.image-item img {
height: 100%;
}
效果