zoukankan      html  css  js  c++  java
  • 两列布局,左侧固定右侧宽度自适应

     关于左侧宽度固定,右侧宽度自适应两列布局的一种很常用的方法我相信大家都知道。就是利用左侧元素浮动,或者绝对定位的方式使其脱离常规文档流,让两个块级元素能够在同一行显示。然后右侧元素 margin-left 的值等于左侧元素宽度,这时右侧元素将紧挨着左侧元素,由于块元素的宽度会自动默认充满剩下的屏幕,所以就实现了右侧自适应的效果了。

    HTML代码如下:

    复制代码
    <!DOCTYPE>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="test.css" type="text/css">
    </head>
    <body>
        <div class="one"></div>
        <div class="two">第一种方法</div>
    </body>
    </html>
    复制代码

    CSS代码如下:

    复制代码
    .one {
        position: absolute;
        height: 100px;
         300px;
        background-color: blue;
    }
    .two {
        height: 200px;
        margin-left: 300px;
        background-color: red;
    }
    复制代码

    浏览器上输出效果:

      第二种方法,我利用的是创建一个新的BFC(块级格式化上下文)来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境,它内部元素的布局不受外面布局的影响。它可以通过以下任何一种方式来创建:

    • float的值不为none
    • position的值不为static或者relative
    • display的值为 table-celltable-captioninline-blockflex, 或者 inline-flex中的其中一个
    • overflow的值不为visible

      关于BFC,在w3c里是这样描述的:在BFC中,每个盒子的左外边框紧挨着包含块的左边框(从右到左的格式化时,则为右边框紧挨)。即使在浮动里也是这样的(尽管一个包含块的边框会因为浮动而萎缩),除非这个包含块的内部创建了一个新的BFC。这样,当我们给右侧的元素单独创建一个BFC时,它将不会紧贴在包含块的左边框,而是紧贴在左元素的右边框。

    HTML代码:

    复制代码
    <!DOCTYPE>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="test.css" type="text/css">
    </head>
    <body>
        <div class="one"></div>
        <div class="two">第二种方法</div>
    </body>
    </html>
    复制代码

    CSS代码:

    复制代码
    .one {
        float: left;
        height: 100px;
         300px;
        background-color: blue;
    }
    .two {
        overflow: auto;
        height: 200px;
        background-color: red;
    }
    复制代码

    浏览器输出效果:

    css属性里面有一个方法可以直接实现它:

         

    1  calc(100% - 100px);

    100px是左边栏的固定宽度

    100%-100px就是右边的宽度   算也是一个计算属性

    努力到无能为力,拼搏到感动自己。 欢迎大家在下方多多评论。
  • 相关阅读:
    sql面试题
    C#基础(1)
    Java中的冒泡排序(减少比较次数)
    Java中面向对象的分拣存储
    Java中分拣存储的demo
    XML序列化
    C#读取csv文件使用字符串拼接成XML
    Java中HashMap(泛型嵌套)的遍历
    Java 中List 集合索引遍历与迭代器遍历
    java 中的try catch在文件相关操作的使用
  • 原文地址:https://www.cnblogs.com/wasbg/p/10844793.html
Copyright © 2011-2022 走看看