左边定宽右边自适应(6种方案)

雨水芬纷

于 2021-11-11 16:57:24 发布

阅读量345

点赞数

分类专栏：前端文章标签： css3 css html

本文链接：https://blog.csdn.net/u014773932/article/details/121271474

版权

前端专栏收录该内容

53 篇文章 3 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>左边定宽右边自适应</title>
    <!-- #左边定宽右边自适应
    实现方案：
    一. 非严格意义
    1.float+calc
    2.inline-block-calc
    3.position+padding

    二. 严格意义
    1.flex
    2.table
    3.grid -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box-wrapper{
            width: 600px;
            height: 200px;
            border: 1px solid #000;
            color: white;
        }

        /* <!-- 第一种方案:1.1 float+calc--> */
        .left-box-floatCalc{
            float: left;
            width: 200px;
            height: 100%;
            background-color: red;
        }
        .right-box-floatCalc{ /*calc(100%-200px)中间没有空格会失效*/
            float: right;
            width: calc(100% - 200px);
            height: 100%;
            background-color: blue;
        }

        /* <!-- 第二种方案:1.2 inline-block-calc--> */
        .left-box-inline-block-calc{
            display: inline-block;
            width: 200px;
            height: 100%;
            background-color: brown;
        }
        .right-box-inline-block-calc{
            display: inline-block;
            width: calc(100% - 200px);
            height: 100%;
            background-color: darkblue;
        }

        /* <!-- 第三种方案:1.3 position+padding--> */
        .box-wrapper-positionPadding{
            position: relative;
        }
        .left-box-positionPadding{
            width: 200px;
            height: 100%;
            background-color: tomato;
            position: absolute;
        }
        .right-box-positionPadding{
            padding-left: 200px;
            height: 100%;
            background-color: blue;
        }

        /* <!-- 第四种方案:2.1 flex--> */
        .box-wrapper-flex{
            display: flex;
        }
        .left-box-flex{
            width: 200px;
            height: 100%;
            background-color: coral;
        }
        .right-box-flex{
            background-color: cornflowerblue;
            flex: 1; /*占满剩余的空间*/
        }

        /* <!-- 第五种方案:2.2 table--> */
        .box-wrapper-table{
            display: table;
        }
        .left-box-table{
            width: 200px;
            height: 100%;
            background-color: hotpink;
            display: table-cell;
        }
        .right-box-table{
            height: 100%;
            background-color: indigo;
            display: table-cell;
        }


        /* <!-- 第六种方案:2.3 grid--> */
        .box-wrapper-grid{
            display: grid;
            /* 聲明列的宽度 */
            grid-template-columns: 200px auto;
        }
        .left-box-grid{
            background-color: magenta;
        }
        .right-box-grid{
            background-color: lightseagreen;
        }
    </style>
</head>
<body>
    <!-- 第一种方案:1.1 float+calc-->
    <div class="box-wrapper">
        <div class="left-box-floatCalc">left-box</div>
        <div class="right-box-floatCalc">right-box</div>
    </div>
    <br>

    <!-- 第二种方案:1.2 inline-block-calc-->
    <!-- inline-block之间有间隙是因为有word-spacing，
        解决这问题可以连接两个inline-block的结束标签，使之没有间隔，如下，
        其他方法详见：https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/ -->
    <div class="box-wrapper">
        <div class="left-box-inline-block-calc">left-box</div
            ><div class="right-box-inline-block-calc">right-box</div>
    </div>
    <br>

    <!-- 第三种方案:1.3 position+padding-->
    <div class="box-wrapper box-wrapper-positionPadding">
        <div class="left-box-positionPadding">left-box</div>
        <div class="right-box-positionPadding">right-box</div>
    </div>
    <br>

    <!-- 第四种方案:2.1 flex-->
    <div class="box-wrapper box-wrapper-flex">
        <div class="left-box-flex">left-box</div>
        <div class="right-box-flex">right-box</div>
    </div>
    <br>

    <!-- 第五种方案:2.2 table-->
    <div class="box-wrapper box-wrapper-table">
        <div class="left-box-table">left-box</div>
        <div class="right-box-table">right-box</div>
    </div>
    <br>

    <!-- 第六种方案:2.3 grid-->
    <div class="box-wrapper box-wrapper-grid">
        <div class="left-box-grid">left-box</div>
        <div class="right-box-grid">right-box</div>
    </div>

</body>
</html>

雨水芬纷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
左边定宽右边自适应(6种方案)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>左边定宽右边自适应</title> <!-- #左边定宽右边自适应实现方案：一. 非严.
复制链接

扫一扫

专栏目录