頁面布局方案-左右固定，中間自適應
阿新 • • 發佈：2018-07-05
ide layout all 固定 eight 頁面布局 圖片 info image
左右固定，中間自適應
三列布局，左右固定，中間自適應，高度自適應
效果：
代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>左右固定，中間自適應</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <style type="text/css"> 7 html,body{margin:0; height: 100%;} 8 .cui_layout_container{ 9 height:100%; 10 } 11 .float_left{ 12 float:left; 13 } 14 .float_right{ 15 float:right; 16 } 17 .cui_layout_container .right_side, 18 .cui_layout_container .left_side, 19 .cui_layout_container .middle{ 20 height: 100%; overflow: auto; 21 } 22 .cui_layout_container .middle .middle_content{ 23 height: 100%; 24 width:100%; 25 overflow: auto; 26 } 27 .cui_layout_container .left_side{ 28 width:200px;/*左側寬度*/ 29 background-color:#FFE69F; 30 } 31 .cui_layout_container .right_side{ 32 background-color:#FFE69F; 33 width:200px; /*右側寬度*/ 34 } 35 .cui_layout_container .middle { 36 background-color:#ff6600; 37 } 38 </style> 39 </head> 40 <body> 41 <div class="cui_layout_container"> 42 <div class="left_side float_left"> 43 左側固定 44 </div> 45 46 <div class="right_side float_right"> 47 右側固定 48 </div> 49 50 <div class="middle"> 51 <div class="middle_content"> 52 中間自適應 53 </div> 54 </div> 55 </div> 56 </body> 57 </html>
頁面布局方案-左右固定，中間自適應