二.固定欄-可擴展欄頁面佈局

時間 2019-11-10

標籤固定可擴展頁面佈局简体版

原文原文鏈接

實現效果：

實現代碼：javascript

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>flex</title> <style type="text/css"> body { margin: 0; padding: 0; } .container { width: 300px; height: 200px; border: 1px solid blue; display: flex; flex-direction: column; } .nav { height: 50px; background-color: grey; display: flex; flex-direction: row; } .nav-item { min-width: 60px; border: 1px solid orangered; } .main { display: flex; flex-direction: row; flex: 1; /*main區域須要自動擴展*/ } .main-left { width: 100px; /*main中的left區域固定*/ background-color: #DC698A; } .main-right { background-color: #3EACDD; flex: 1; /*main中的right區域須要自動擴展*/ } </style> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <div class="container"> <div class="nav"> <div class="nav-item">nav1</div> <div class="nav-item">nav2</div> <div class="nav-item">nav3</div> </div> <div class="main"> <div class="main-left">固定欄：內容內容內容內容內容內容內容內容內容內容</div> <div class="main-right">可擴展欄：內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div> </div> </div> </body> <script type="text/javascript"> (function run() { $(".container").animate({ width: 500, height: 300 }, 1500, () => { $(".container").animate({ width: 300, height: 200 }, 1500, run) } ) }()); </script> </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。