左侧固定,右侧自适应布局

Posted shen076

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了左侧固定,右侧自适应布局相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>左边定宽,右边自适应</title>
    <style>
        /* 基本样式 */

        .wrapper {
            padding: 15px 20px;
            border: 1px dashed #ff6c60;
        }

        .left {
            width: 120px;
            border: 5px solid #ddd;
        }

        .right {
            margin-left: 20px;
            border: 5px solid #ddd;
        }

        /******************** 左侧 float, 右侧 margin-left ***********************/

        .wrapper-float .left {
            float: left;
        }

        .wrapper-float .right {
            margin-left: 150px;
        }

        /******************** 左侧 float, 右侧 BFC ***********************/

        .wrapper-float-bfc .left {
            float: left;
        }

        .wrapper-float-bfc .right {
            overflow: hidden;
        }

        /******************** 左侧 绝对定位, 右侧 margin-left ***********************/

        .wrapper-absolute .left {
            position: absolute;
        }

        .wrapper-absolute .right {
            margin-left: 150px;
        }

        /******************** flex布局 ***********************/

        .wrapper-flex {
            display: flex;
        }

        .wrapper-flex .left {
            flex: none;
        }

        .wrapper-flex .right {
            flex: auto;
        }

        /******************** grid布局 ***********************/

        .wrapper-grid {
            display: grid;
            grid-template-columns: 120px 1fr;
        }

        /*********** 左右 inline-block, 然后右侧 calc 计算宽度 ******************/

        .wrapper-inline-block {
            font-size: 0;
        }

        .wrapper-inline-block .left,
        .wrapper-inline-block .right {
            display: inline-block;
            vertical-align: top;
            font-size: 14px;
            box-sizing: border-box;
        }

        .wrapper-inline-block .right {
            width: calc(100% - 140px);
        }

        /******************** 左右 float, 然后右侧 calc 计算宽度 ***********************/

        .wrapper-double-float .left,
        .wrapper-double-float .right {
            float: left;
            box-sizing: border-box;
        }

        .wrapper-double-float .right {
            width: calc(100% - 140px);
        }
    </style>
</head>

<body>
    <div style="padding: 20px 20px;">
        <span style="color: #ff6c60;">选择不同的方案查看效果:</span>
        <select id="select">
            <option value="0">双 inline-block 方案</option>
            <option value="1">双 float 方案</option>
            <option value="2">float + margin-left方案</option>
            <option value="3">float + BFC方案</option>
            <option value="4">absolute + margin-left方案</option>
            <option value="5">flex 方案</option>
            <option value="6">grid 方案</option>
        </select>
    </div>
    <div style="padding: 20px;">
        <span style="color: #ff6c60;">选择右侧不同的高度:</span>
        <select name="" id="changeHeight">
            <option value="1">右侧很低</option>
            <option value="0">右侧很高</option>

        </select>
    </div>
    <div class="wrapper wrapper-inline-block" id="wrapper">
        <div class="left">
            左边固定宽度,高度不固定,</br>
            </br>
            </br>
            </br>
            高度有可能会很小,也可能很大。
        </div>
        <div class="right">
            这里的内容可能比左侧高,也可能比左侧低。宽度需要自适应。</br>
            基本的样式是,两个div相距20px, 左侧div宽 120px
        </div>
    </div>
    <script>
        var wrapper = document.querySelector(‘#wrapper‘)
        document.querySelector(‘#select‘).addEventListener(‘change‘, function (event) {
            var value = event.target.value
            switch (+value) {
                case 0: wrapper.className = ‘wrapper wrapper-inline-block‘;
                    break;
                case 1: wrapper.className = ‘wrapper wrapper-double-float‘;
                    break;
                case 2: wrapper.className = ‘wrapper wrapper-float‘;
                    break;
                case 3: wrapper.className = ‘wrapper wrapper-float-bfc ‘;
                    break;
                case 4: wrapper.className = ‘wrapper wrapper-absolute‘;
                    break;
                case 5: wrapper.className = ‘wrapper wrapper-flex‘;
                    break;
                case 6: wrapper.className = ‘wrapper wrapper-grid‘;
                    break;
            }
        })
        var rightDiv = document.querySelector(‘.right‘)
        document.querySelector(‘#changeHeight‘).addEventListener(‘change‘, function (event) {
            var value = event.target.value
            switch (+value) {
                case 0: rightDiv.style.height = "700px";
                    break;
                case 1: rightDiv.style.height = "auto";
                    break;
            }
        })
    </script>
</body>

</html>

  

 

原文:https://zhuqingguang.github.io/2017/08/16/adapting-two-layout/

以上是关于左侧固定,右侧自适应布局的主要内容,如果未能解决你的问题,请参考以下文章

flex左侧固定宽度,右侧自适应布局

左侧固定,右侧自适应的布局

左侧固定,右侧自适应布局

网页布局-左侧固定,右侧自适应

网页布局——三列布局(左侧和右侧固定,中间自适应)

七种实现左侧固定,右侧自适应两栏布局的方法