zoukankan      html  css  js  c++  java
  • 两列布局

    两列布局,左侧固定,右侧自适应的三种常用方法

    <!DOCTYPE>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>两列布局</title>
        <style>
            /*方法1:流体布局。左元素float,右元素margin-left或者overflow*/
            .one {
                float: left;
                height: 100px;
                 300px;
                background-color: blue;
            }
            .two {
                overflow: auto; /*hidden*/
                /*margin-left: 300px;*/
                height: 200px;
                background-color: red;
            }
    
            /*方法2:绝对定位布局。左元素absolute,右元素同上形成BFC*/
            /* .one {
                position: absolute;
                height: 100px;
                 300px;
                background: blue;
                left: 0;
            }
            .two {
                overflow: auto;
                height: 100px;
                 100%;
                background: red;
            } */
    
            /*方法3:flex布局。父元素flex,右元素给定flex的值*/
            /*body{
                display: flex;
            }
            .one {
                height: 100px;
                 300px;
             background-color: blue;
            }
            .two {
                flex:1;
             background-color: red;
                height: 200px;
            }*/
        </style>
    
    </head>
    
    <body>
        <div class="one"></div>
        <div class="two"></div>
    </body>
    
    </html>
    

    如果下方再加一个元素,对于方法1和3没什么影响,对于flex布局需要把元素1和2放在一个div里

    <!DOCTYPE>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .top{
      display: flex;
      flex-direction: row;
    }
    .one {
      height: 100px;
      width: 300px;
       background-color: blue;
    }
    .two {
       flex: 1;
       height: 200px;
       background-color: red;
    }
    .three{
       height: 100px;
      background-color: yellow;
    }
    </style>
    </head>
    <body>
       <div class="top">
         <div class="one"></div>
         <div class="two"></div>
       </div>
      <div class="three"></div>
    </body>
    </html>
  • 相关阅读:
    docker运行jar包
    jQuery动态添加元素并绑定事件
    Ubuntu将软件(Sublime Text 2为例)锁定到启动器
    jQuery实现列表自动滚动
    浅谈css中的position属性
    关于jQuery中.attr()和.prop()的问题
    Python_opencv库
    Python_faker (伪装者)创建假数据
    Python_Tips_dumpload 和 dumpsloads 的区别与联系
    Linux_CentOS 7下Nginx服务器的安装配置
  • 原文地址:https://www.cnblogs.com/shen076/p/6733395.html
Copyright © 2011-2022 走看看