布局：左寬度固定，右邊自適應
阿新 • • 發佈：2017-08-16
con sidebar section 屏幕 type char red oat oct
需求：
左側固定寬，右側自適應屏幕寬；
左右兩列，等高布局；
左右兩列要求有最小高度，例如：200px;（當內容超出200時，會自動以等高的方式增高）
方法1：浮動布局
這種方法我采用的是左邊浮動，右邊加上一個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>
方法2：浮動和負邊距實現
這個方法采用的是浮動和負邊距來實現左邊固定寬度右邊自適應寬度的布局效果
這個方法有個缺點就是左邊的固定塊被右邊的父元素遮擋住了，如果左邊是一個菜單需要點擊，那麽這個方法就不是很適用
<!DOCTYPE html> <htmllang="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>
方法3：網格布局
關鍵點在於設置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>
布局：左寬度固定，右邊自適應