[TOC] # 需求 多列等高，要求左右兩列高度自適應且一樣，分別設置不同背景色 <br> <br> # 實現 * padding + margin + overflow 實現多列等高效果，兼容性好 * border實現多列等高，左邊框寬度為200px，左列浮動，偽元素清除浮動 * 父元素線性漸變背景色實現多列等高（同理各種顏色障眼法） * display：flex實現多列等高 * display：grid實現多列等高 * display:table-cell 實現多列等高 <br> <br> # 代碼 HTML： ``` <div class="g-container"> <div class="g-xxx"> <div class="g-left"> content<br/> </div> <div class="g-right"> content<br/> content<br/> content<br/> content<br/> </div> </div> </div> ``` SCSS： ``` h2 { text-align: center; line-height: 60px; font-size: 20px; background: #00bcd4; color: #fff; } .g-container { width: 1000px; margin: 0 auto; line-height: 2; color: #fff; & > div { margin-bottom: 50px; } } .g-padmar { position: relative; overflow: hidden; .g-left { float: left; width: 200px; background: #4caf50; padding-bottom:9999px; margin-bottom:-9999px; } .g-right { float: left; width: 800px; background: #99afe0; padding-bottom: 9999px; margin-bottom: -9999px; } } .g-border { position: relative; width: 800px; border-left: 200px solid #4caf50; background: #99afe0; &::after { content: "."; display:block; height: 0; clear: both; } .g-right { width: 800px; } .g-left { float: left; width: 200px; margin-left: -200px; } } .g-lineargradient { background: linear-gradient(90deg, #4caf50 0, #4caf50 20%, #99afe0 20%, #99afe0); overflow: hidden; .g-left { float: left; width: 200px; } .g-right { float: left; width: 800px; } } .g-flex { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; .g-left { flex: 200px 0 0 ; background: #4caf50; } .g-right { flex: auto 1 0; background: #99afe0; } } .g-grid { display: grid; // align-items: stretch; 默認值 grid-template-columns: 200px auto; .g-left { background: #4caf50; } .g-right { background: #99afe0; } } .g-table { overflow:hidden; display:table; .g-left { width: 200px; display: table-cell; background: #4caf50; } .g-right { width: 800px; display: table-cell; background: #99afe0; } } ``` <br> <br> # 參考資料 [CSS Inspiration -- CSS靈感](https://chokcoco.github.io/CSS-Inspiration/#/./layout/multi-column-contour)