zoukankan      html  css  js  c++  java
  • 页面布局方案-左定宽,右自适应

    左定宽,右自适应

    两列布局,左边定宽,右边自适应,高度自适应。

    效果:

     代码:

     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>
  • 相关阅读:
    20162330 2016-2017-2《程序设计与数据结构》课程总结
    强化学习--Policy Gradient
    59. Spiral Matrix II
    54. Spiral Matrix(剑指offer 19)
    58. Length of Last Word
    c++ string split
    神经网络反向传播,通俗理解
    大话设计模式C++ 备忘录模式
    57. Insert Interval
    c++ sort
  • 原文地址:https://www.cnblogs.com/ryanchancrj/p/9268942.html
Copyright © 2011-2022 走看看