zoukankan      html  css  js  c++  java
  • 布局之不定宽与自适应

    不定宽:指可设置任意宽度,或宽度有内容决定。

    自适应:无论其他元素怎么变,它都不用改。

    命题:设置不定宽与自适应

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

    方案1:float+overflow

    .left{
       float:left;
       100px;                 //.left p{200px;}
    margin-right:20px; } .right{ overflow:hidden; }

    方案2:table

    //布局优先
    .parent{ display:table; 100%; //table默认宽度以内容为准,每列的宽度之和为table总宽 table-layout:fixed; //提高渲染速度,实现了布局优先 } .left,.right{ display:table-cell; //设为单元格 不能设margin } .left{ 100 px; padding-right:20px; }
    //内容优先
    .parent{ display:table; 100%; //table默认宽度以内容为准,每列的宽度之和为table总宽 } .left,.right{ display:table-cell; //设为单元格 不能设margin } .left{ 0.1%; padding-right:20px; }
    .left p{
    200px;
    }
     

    方案3:flex

    .parent{
        display:flex;
    }
    .left{
         100 px;          //.left p{200px;}
        margin-right:20px;
    }
    .right{
        flex:1;                 //相当于flex:1 1 0;   剩余空间都给了right
    }

    附加:多列不定宽与自适应

        把不定宽的样式设为一致即可

  • 相关阅读:
    php 发送手机验证码
    PHP 发送邮件
    php 图形验证码
    css 把图片变成灰色
    本地配置虚拟主机
    VMware 14 激活密钥
    linux每日命令(12): nl 命令
    linux每日命令(11): cat命令
    linux每日命令(10): touch命令
    linux每日命令(9): cp命令
  • 原文地址:https://www.cnblogs.com/july-Vivian/p/4614701.html
Copyright © 2011-2022 走看看