頁面布局方案-左定寬，右自適應
阿新 • • 發佈：2018-07-05
eight idt all con .com float auto pan bubuko
左定寬，右自適應
兩列布局，左邊定寬，右邊自適應，高度自適應。
效果：
代碼：
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{ 8 margin:0; 9 height: 100%; 10 } 11 .cui_layout_container{ 12 height:100%; 13 } 14 .float_left{float:left;} 15 .cui_layout_container .right_side,.cui_layout_container .left_side{ 16 height: 100%; 17 overflow: auto; 18 } 19.cui_layout_container .left_side{ 20 width:200px; /*左側的寬度*/ 21 background-color:#ff7d20; 22 } 23 .cui_layout_container .right_side{ 24 background-color:#FFE69F; 25 margin-left: 200px; /*需要和上邊設置一樣*/ 26 } 27 .cui_layout_container .right_side .right_side_content{ 28 width:100%; 29 height:100%; 30 overflow: auto; 31 } 32 </style> 33 </head> 34 <body> 35 36 <div class="cui_layout_container"> 37 38 <div class="left_side float_left"> 39 左側固定 40 </div> 41 42 <div class="right_side"> 43 <div class="right_side_content"> 44 右側自適應 45 </div> 46 </div> 47 </div> 48 49 50 </body> 51 </html>
頁面布局方案-左定寬，右自適應