zoukankan      html  css  js  c++  java
  • 左栏固定,右栏自适应的两栏布局

    第一种方法:采用绝对定位+BFC(overflow:auto)

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .left{
                 200px;
                height: 200px;
                background: red;
                position: absolute;
            }
            .right{
                height: 200px;
                margin-left: 200px;
                background: blue;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </body>
    </html>
    复制代码

    第二种方法:采用左浮动+BFC(overflow:auto)

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .left{
                 200px;
                height: 200px;
                background: red;
                float: left;
            }
            .right{
                height: 200px;
                background: blue;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </body>
    </html>
    复制代码

    第三种方法:采用flex布局+BFC(overflow:auto)(推荐使用)

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .main{
                display: flex;
            }
            .left{
                 200px;
                height: 200px;
                background: red;
            }
            .right{
                height: 200px;
                background: blue;
                flex: 1;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="left">左边</div>
            <div class="right">右边</div>
        </div>
    </body>
    </html>
    复制代码

    第四种:table布局(高度会自动撑开)

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .main {
                display: table;
                 100%;
            }
            .left ,.right {
                display:table-cell;
                height:240px; 
            }
            .right{
                background-color: blue;
            }
            .left {
                 300px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="main">
          <div class="left" >左边</div>
          <div class="right" >右边</div>
        </div>
    </body>
    </html>
    复制代码

    第五种:grid网格布局+BFC(overflow:auto)

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .main {
                display: grid;
                 100%;
                grid-template-rows: 200px;  /*设置行高*/
                grid-template-columns: 200px auto;  /*设置列数属性*/
            }
            .right{
                background-color: blue;
            }
            .left {
                background-color: red;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div class="main">
          <div class="left" >左边</div>
          <div class="right" >右边</div>
        </div>
    </body>
    </html>
    复制代码

    如果不触发BFC,如果右边内容超出右边盒子的高度会出现内容往左边靠和溢出的情况

    第一种情况:浮动

    第二种情况:绝对定位,flex布局,grid网格布局

  • 相关阅读:
    Hihocoder #1014 : Trie树
    Codevs 1298 凸包周长
    洛谷 P1355 神秘大三角(计算几何基础)
    Cogs 1688. [ZJOI2008]树的统计Count(树链剖分+线段树||LCT)
    Poj 2887 Big String(块状数组)
    P1449 后缀表达式
    P3478 [POI2008]STA-Station
    P1533 可怜的狗狗
    P2073 送花
    P1014 Cantor表
  • 原文地址:https://www.cnblogs.com/dillonmei/p/12570739.html
Copyright © 2011-2022 走看看