圣杯布局/双飞翼布局

晓殇大人

已于 2022-12-30 09:05:13 修改

阅读量35

点赞数

文章标签： css css3 前端

于 2022-12-29 22:17:21 首次发布

本文链接：https://blog.csdn.net/dx3906nnn/article/details/128488755

版权

圣杯布局/双飞翼布局

float+子绝父相+calc()

		.frist {
            position: relative;
            min-width: 200px;
            width: 100%;
            height: 100px;
            background-color: red;
            overflow: hidden;
        }

        .frist-left,
        .frist-right {
            width: 100px;
            height: 100%;
            background-color: blue;
        }

        .frist-left {
            float: left;
        }

        .frist-right {
            float: right;
        }

        .frist-mid {
            position: absolute;
            width: calc(100%-100*2);
        }

		<div class="frist">
            <div class="frist-left"></div>
            <div class="frist-mid"></div>
            <div class="frist-right"></div>
        </div>

flex布局+flex-shrink收缩因子(flex布局永远的神)

		.second {
            margin-top: 50px;
            min-width: 200px;
            width: 100%;
            height: 100px;
            background-color: red;
            display: flex;
        }

        .second-left,
        .second-right {
            width: 100px;
            height: 100%;
            background-color: blue;
        }

        .second-mid {
            flex: 1;
        }

		<div class="second">
            <div class="second-left"></div>
            <div class="second-mid"></div>
            <div class="second-right"></div>
        </div>

float+子绝父相+padding

        .thired {
            position: relative;
            margin-top: 50px;
            min-width: 200px;
            width: 100%;
            height: 100px;
            background-color: red;
        }

        .thired-left,
        .thired-right {
            width: 100px;
            height: 100%;
            background-color: blue;
        }

        .thired-left {
            float: left;
        }

        .thired-right {
            float: right;
        }

        .thired-mid {
            position: absolute;
            right: 0;
            width: 100%;
            padding: 0 100px;
            box-sizing: border-box;
        }

        <div class="thired">
            <div class="thired-left"></div>
            <div class="thired-mid"></div>
            <div class="thired-right"></div>
        </div>