.container {
width: 800px;
margin: 0 auto;
background-color: #f0f0f0;
.row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
height: 500px;
.col {
width: 33.33%;
padding: 10px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
第一行內容
第二行內容
const container=document.querySelector('.container');
const rows=document.querySelectorAll('.row');
const cols=document.querySelectorAll('.col');
for (let i=0; i< rows.length; i++) {
rows[i].addEventListener('click', function() {
const current=i;
const newHeight=current * 0.7;
cols[current].style.height=newHeight + 'px';
rows[current].style.height=newHeight + 'px';
});