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
    }

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

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

  • 相关阅读:
    基于go语言的消息推送系统架构分析
    golang IDE 工具liteide打开报错解决方法
    centos 安装ffmpeg 并生成文件截图
    android 微信分享
    函数编程之闭包漫谈(Closure)
    2017-06-26
    本周总结
    一周总结
    一周总结
    一周总结
  • 原文地址:https://www.cnblogs.com/july-Vivian/p/4614701.html
Copyright © 2011-2022 走看看