zoukankan      html  css  js  c++  java
  • 布局那点事

    1.两列左侧固定宽度,右侧自适应

    <div class="parent">
         <div class="left">
            <p>left</p>
         </div>
         <div class="right">
            <p>right</p>
         </div>
    </div>
    

    1.float+margin

      
    .left {
       float:left;
       100px;
       height:100%;
    }
    .right {
       height:100%;
       margin-left:100px;
    }
          
    

    2.float+overflow

    .left {
       float:left;
       100px;
       background:red;
    }
    .right {
       overflow:hidden;
       background:yellow;
    }
    

    3.flex

    .parent{
       display: flex;       
    }
    .left{
       background: red;
        100px;
    }
    .right{
       background: yellow;
       flex-grow: 1;
    }  
    

    2.三列左右固定,中间自适应

    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>

    1.流式

    .left{
       float:left;
       background:red;
       100px;
       height:100px;
       } 
    .right{
       float:right;
       background:black;
       100px;
       height:100px;
       }
    .center{
       background: yellow;
       margin-left:100px;
       margin-right: 100px;
       height:100px;
       }

    2.BFC

    .center{
    background: yellow;
    height:100px;
    overflow: hidden;
    }

    3.Flex

    .container{
        100%;
       height:100px;
       display: flex;
    }
    .left{
     background:red;
     100px;
    }
    .right{
      background:black;
      100px;
      order:2;
    }
    .center{
      background:yellow;
      flex-grow:1;
      order:1;
    }

    4.absolute

    
    .container{
       100%;
      position: relative;
    }
    .left{
       background:red;
       100px;
       height:100px;
       position:absolute;
       left:0;
       top:0;
    }
    .right{
        background:black;
        100px;
        height:100px;
        position:absolute;
        right:0;
        top:0;
    }
    .center{
        background:yellow;
        margin:0 100px;
        height:100px;
    }
    

    本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=h2kcch2bbaa

  • 相关阅读:
    如何将Python项目发布到PyPI
    hashlib的md5计算
    使用hexo和coding建立静态博客站点
    mysql 使用记录
    linux QA
    linux 使用记录
    转载-linux内核长什么样
    mysql 更改默认字符集
    Say goodbye
    SSH proxycommand 不在同一局域网的机器ssh直连
  • 原文地址:https://www.cnblogs.com/10manongit/p/12993818.html
Copyright © 2011-2022 走看看