实现一个两栏三列布局，要求两边固定宽度，中间自适应

最新推荐文章于 2021-12-13 21:09:21 发布

swallowblank

最新推荐文章于 2021-12-13 21:09:21 发布

阅读量131

点赞数

分类专栏：前端 css及css奇技淫巧

本文链接：https://blog.csdn.net/swallowblank/article/details/115384460

版权

前端同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

css及css奇技淫巧

15 篇文章 3 订阅

订阅专栏

方法1：margin + 双absolute

    <style>
        html, body {
            margin: 0;
            height: 100%;
            box-sizing: border-box;
        }
        div {
            height: 100%;
        }

        .box {
            position: relative;
        }
		// tip:这里其实left不用定位用左浮动也是可以的
        .left {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            background-color: lightblue;
        }

        .right {
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            background-color: lightcoral;
        }

        .middle {
            margin-right: 200px;
            margin-left: 200px;
            background-color: lightgoldenrodyellow;
        }
    </style>

    <div class="box">
        <div class="left">
        </div>
        <div class="middle">
        </div>
        <div class="right"></div>
    </div>

方法2：双float，中间margin

<style>
    html,
    body {
        margin: 0;
        height: 100%;
        box-sizing: border-box;
    }
    div {
        height: 100%;
    }
    .box {
        position: relative;
    }
    .left {
        float: left;
        width: 200px;
        height: 200px;
        background: green;
    }
    .right {
        float: right;
        width: 200px;
        height: 200px;
        background: red;
    }
    .middle {
        margin-left: 210px;
        margin-right: 210px;
        background: black;
        height: 200px;
    }
</style>

<div class="box">
	这里必须是left-right-middle这个顺序
	left-middle-right这个顺序会出错
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle">
    </div>
</div>

方法3：圣杯布局？

https://mp.weixin.qq.com/s/Im3uNOOWdElFvPFAsCOfZA

方法4：双飞翼？

https://mp.weixin.qq.com/s/Im3uNOOWdElFvPFAsCOfZA

方法5：Flex

<style>
    html,
    body {
        height: 100%;
        margin: 0;
    }

    .container {
        display: flex;
        height: 100%;
    }

    .middle {
        flex: 1 0;
        background-color: lightblue;
    }

    .left {
        flex: 0 0 250px;
        background-color: lightcoral;
    }

    .right {
        flex: 0 0 250px;
        background-color: lightgoldenrodyellow;
    }
</style>

<body>
    <div class="container">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
    </div>
</body>

swallowblank

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现一个两栏三列布局，要求两边固定宽度，中间自适应

方法1：margin + 双absolute <style> html, body { margin: 0; height: 100%; box-sizing: border-box; } div { height: 100%; } .box { position: relative;
复制链接

扫一扫

专栏目录