<!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>
記錄一個常見的二列布局
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
技術整理（陳年佳釀）
技術站點 Hacker News：非常棒的針對編程的鏈接聚合網站 Programming reddit：同上 MSDN：微軟相關的官方技術集中地，主要是文檔類 infoq：企業級應用，關注軟件開發領域