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

    上例的图,就是左右布局

    1.定宽 + 自适应

    1.1、float + margin

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

    p{
        background: #666;   
       }
       .right p{
        background: #999;
       }
       .left{
        float: left;
         100px;
       }
       .right{
        margin-left: 100px;
       }
      

    1.2、float + overflow:hiden

    p{
        background: #666;   
       }
       .right p{
        background: #999;
       }
       .left{
        float: left;
         100px;
       }

     .right{
        overflow: hidden;
        /*bfc原理*/
       }

    1.3、table

    相同结构,用table 去模拟

    .parent{
        display: table;
        500px;
        /*table-layout: fixed;*/ 
       }
       .left{
        /* 100px;*/
       }
       .left, .right{
        display: table-cell;
       }

    1.4、flex

    .parent{
        display: flex;
       }
       .left{
         100px;
        
       }
       .left, .right{
        flex: 1;
       }

    2.两列定宽

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

    p {
        background: #666;   
       }
       .right p{
        background: #999;
       }
       .left,.center{
        float:left;
        100px;
        margin-right: 20px;
       }
       .right{
        overflow: hidden;
       }

    3.不定宽 + 自适应

    4.不定宽 + 不定宽 + 自适应

    (同理)

    5.等宽

    多列等宽,一般这么写

    但是如果要给外边距呢。。。。。。。。

    5.2、table

    <div class="parent-fix">
       <div class="parent">
        <div class="colum">
         <p>1</p>
        </div>
        <div class="colum">
         <p>2</p>
        </div>
        <div class="colum">
         <p>3</p>
        </div>
        <div class="colum">
         <p>4</p>
        </div> 
       </div>
      </div>


       .parent-fix{
        margin-left:-20px ;
       }
       .parent{
        display: table;
         100%;
       }
       .colum{
        display: table-cell;
        padding-left: 20px;
       }

    5.3 flex

    6.等高布局

  • 相关阅读:
    APP性能测试工具GT的使用总结:app内存测试
    app专项测试:app静态测试(耗时、流量、内存、图片大小)
    沟通的重要性
    [改善Java代码]推荐覆写toString方法
    [改善Java代码]使用package-info类为包服务
    [改善Java代码]不要主动进行垃圾回收
    [改善Java代码]推荐使用String直接量赋值
    [改善Java代码]在接口中不要存在实现代码
    [改善Java代码]不要随便设置随机种子
    [改善Java代码]优先使用整型池
  • 原文地址:https://www.cnblogs.com/x-yy/p/11373493.html
Copyright © 2011-2022 走看看