Skip to content

Latest commit

 

History

History
151 lines (144 loc) · 2.83 KB

左边定宽，右边自适应.md

File metadata and controls

151 lines (144 loc) · 2.83 KB
  1. 左侧固定宽度，绝对定位
<!DOCTYPE html>
<html lang="en">
    <style>
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .container{
            width: 100%;
            height: 100%;
            position: relative;
        }
        .left{
            width: 200px;
            height: 100%;
            background-color: lightcyan;
            position: absolute;
        }
        .right{
            padding-left: 200px;
            height: 100%;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>
  1. flex
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .container{
            width: 100%;
            height: 100%;
            display: flex;
        }
        .left{
            width: 200px;
            height: 100%;
            background-color: lightcyan;
        }
        .right{
            flex:1;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>
  1. table布局
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .container{
            width: 100%;
            height: 100%;
            display: table;
        }
        .left{
            width: 200px;
            height: 100%;
            display: table-cell;
            background-color: lightcyan;
        }
        .right{
            display:table-cell;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>
  1. grid布局
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .container{
            width: 100%;
            height: 100%;
            display: grid;
            /* 列的宽度，左侧固定，右侧auto */
            grid-template-columns: 200px auto;
        }
        .left{
            background-color: lightcyan;
        }
        .right{
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>