zoukankan      html  css  js  c++  java
  • CSS 实现:两栏布局(一边固定,一边自适应)

    ☊【实现要求】:CSS实现左边固定,右边自适应父容器宽度的两栏布局。

    <body>
        <div class="left"></div>
        <div class="main"></div>
    </body>
    

    √【实现】:

    // html 和 body 的高度默认为0,因此要先设置为100%,并且清除默认样式(margin:0; padding:0)
    html,body {
        /* 100%;*/
        height: 100%;   // html,body 默认高度为 0
        margin: 0;
        padding: 0;
    }
    
    .left {
         200px;
        height: 100%;	// 撑满整个页面高度
        float: left;	// 左边浮动
        background: orange;
    }
    
    .main {
        height: 100%;	// 撑满整个页面高度
        margin-left: 200px;	//距左边距200px
        background: green;
    }
    

    注意: 如果浮动非替换元素,则要指明一个明确的宽度;否则,它们会尽可能地窄。

    假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。

    实现效果:

    demo-7


    ☊【实现要求】: CSS实现右侧宽度为200px,左侧自动扩展的两栏布局。

    <body>
        <div class="right"></div> <!-- 注意用 float 方式, 该行必须写在 main 上面 -->  
        <div class="main"></div>
    </body>
    

    √【实现】:

    body, html {
        height: 100%;
        /* 100%;*/
        margin: 0;
        padding: 0;
    }
    
    .main {
        height: 100%;
        margin-right: 200px;
        background: green;
    }
    
    .right {
         200px;
        height: 100%;
        float: right;
        background: orange;
    }
    

    demo-7


    ☊【实现要求】:两栏布局,左边固定,右边自适应

    demo3-4

    <div class="demo3">
        <div class="col-1"></div>
        <div class="col-2"></div>
    </div>
    

    √【实现】:

    float 布局

    .demo3 {
        .col-1 {
        	 150px;
        	float: left;	// 脱离文档流
        }
        .col-2 {
        	// 不需要设置 margin-left, float会形成包围文字效果,虽然col-2的左边部分被col-1覆盖
        }
    }
    

    demo3-4(1)

    如果设置 margin-left: 170px; 则 col-2 会向右偏移:

    demo3-4-add

    给 col-2 添加 overflow: hidden;,则不需要设置 margin-left,自动偏右:

    demo3-4(2)

    position: absolute; 左边元素相对于父元素绝对定位

    *floatposition:absolute; 都脱离文档流

    demo3-5

    .demo3 {
        position: relative;	// 定位父元素
        
        .col-1 {
        	 150px;
        	position: absolute;	// 脱离文档流
        }
        .col-2 {
        	margin-left: 150px;	// absolute不会形成文字环绕效果,因此col-2会向上浮,
        						// 左边部分(包括文字)会隐藏在col-1下面,需要设置 margin-left
        }
    }
    

    若 col-2 不设置 margin-left:

    demo3-5(1)

    设置 margin-left 后:

    demo3-5(2)

    注意:这种情况下,对 col-2 使用 overflow: hidden 不起作用,只能通过偏移量来进行定位

    flex 布局

    .demo3 {
        display: flex;
        display: -webkit-flex;
        
        .col-1 {
        	 150px;
        }
        .col-2 {
        	flex: 1;	// flex:1; 自动撑满剩余宽度
        	-webkit-flex: 1;
        }
    }
    

    Scoop It and Enjoy the Ride!
  • 相关阅读:
    get 传 json 数据
    go text/template html/template invalid memory address or nil pointer dereference
    (转)go语言变参,匿名函数的多种用法
    shell 定义变量 坑
    python3 使用aria2下载的一个脚本
    python3 selenium 超时停止加载,并且捕捉异常, 进行下一步【亲测有效】
    selenium学习笔记——driver.get(url) 页面加载时间太长
    python Selenium chromedriver 自动化超时报错:你需要使用多标签保护罩护体
    selenium等待
    小数据池与代码块
  • 原文地址:https://www.cnblogs.com/Ruth92/p/5482065.html
Copyright © 2011-2022 走看看