<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>两列布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.header {
width: 100vw;
height: 50px;
background: #e5e5e5;
}
.container {
width: 100vw;
height: calc(100vh - 50px);
}
.left {
background: #f00;
position: absolute;
left: 0;
top: 50px;
bottom: 0;
height: inherit;
width: 240px;
transition: width 0.3s ease-in-out;
}
.right {
background: #f90;
width: auto;
height: inherit;
position: absolute;
left: 240px;
top: 50px;
right: 0;
bottom: 0;
transition: left 0.3s ease-in-out;
}
.container .left.close {
width: 64px;
}
.container .right.close {
left: 64px;
}
</style>
</head>
<body>
<header class="header">
<button id="btn">切换按钮</button>
</header>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
<script>
const btn = document.getElementById('btn');
const right = document.querySelector('.right');
const left = document.querySelector('.left');
let flag = true;
btn.addEventListener('click', (e) => {
if (flag) {
console.log(right.className);
right.className = `${
right.className} close`;
left.className = `${
left.className} close`;
} else {
right.className = 'right';
left.className = 'left';
}
flag = !flag;
})
</script>
</html>
记录一个常见的二列布局
猜你喜欢
转载自blog.csdn.net/kuangshp128/article/details/106529251
今日推荐
周排行