佈局：左寬度固定，右邊自適應
阿新 • • 發佈：2018-11-06
需求：
左側固定寬，右側自適應螢幕寬；
左右兩列，等高佈局；
左右兩列要求有最小高度，例如：200px;（當內容超出200時，會自動以等高的方式增高）
方法一：浮動佈局
這種方法我採用的是左邊浮動，右邊加上一個margin-left值，讓他實現左邊固定，右邊自適應的佈局效果
這種實現方法最關鍵之處就是自適應寬度一欄“div#content”的“margin-left”值要等於固定寬度一欄的寬度值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style type="text/css"> *{ margin: 0; padding: 0; } #left { float: left; width: 220px; background-color: green; } #content { background-color: orange; margin-left: 220px;/*==等於左邊欄寬度==*/ } </style> <body> <div id="left">Left sidebar</div> <div id="content">Main Content</div> </body> </html>
方法二：浮動和負邊距實現
這個方法採用的是浮動和負邊距來實現左邊固定寬度右邊自適應寬度的佈局效果
這個方法有個缺點就是左邊的固定塊被右邊的父元素遮擋住了，如果左邊是一個選單需要點選，那麼這個方法就不是很適用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style type="text/css"> *{ margin: 0; padding: 0; } #left { background-color: green; float: left; width: 220px; margin-right: -100%; } #content { float: left; width: 100%; } #contentInner { margin-left: 220px;/*==等於左邊欄寬度值==*/ background-color: orange; } </style> <body> <div id="left">Left Sidebar</div> <div id="content"> <div id="contentInner">Main Content</div> </div> </body> </html>
方法三：網格佈局
關鍵點在於設定grid-template-columns: 200px auto;，第一個200px表示左邊的，auto表示右邊的自動，如果需要設定等高的效果，將grid-template-rows: 200px;這個屬性去掉，可以給left和right都設定一個最小的高度，如果內容超出的話，會自動增加高度（一邊超出高度，兩邊都會自動增加高度）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> html *{ padding: 0; margin: 0; } .layout.grid .left-right-center{ width:100%; display: grid; grid-template-rows: 200px; grid-template-columns: 200px auto; } .left{ background-color: red; } .right{ background-color: blue; } </style> <body> <section class="layout grid"> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> </article> </section> </body> </html>