三栏布局的实现(左右固定宽，中间自适应)

最新推荐文章于 2023-04-19 15:23:34 发布

%程序羊%

最新推荐文章于 2023-04-19 15:23:34 发布

阅读量184

点赞数

分类专栏：小知识点文章标签： html css flex

本文链接：https://blog.csdn.net/weixin_45890764/article/details/118266739

版权

小知识点专栏收录该内容

6 篇文章 0 订阅

订阅专栏

第一种使用float布局

<style>
    html{
        height: 100%;
    }
    body{
        height: 100%;
    }
    .box{
        width: 100%;
        height: 100%;
    }
    .left{
        width: 200px;
        height: 100%;
        background-color: aqua;
        float: left;
    }
    .right{
        width: 200px;
        height: 100%;
        background-color: blue;
        float: right;
    }
    .middle{
        background-color: black;
        width: calc(100% - 400px);
        float: left;
        height: 100%;
    }
</style>
<div class="box">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
</div>

第二种使用float加margin

<style>
    html{
        height: 100%;
    }
    body{
        height: 100%;
    }
    .box{
        width: 100%;
        height: 100%;
    }
    .left{
        width: 200px;
        height: 100%;
        background-color: aqua;
        float: left;
    }
    .right{
        width: 200px;
        height: 100%;
        background-color: blue;
        margin-top: -100vh;
        float: right;
    }
    .middle{
        margin-left: 200px;
        background-color: black;
        width: calc(100% - 400px);
        height: 100%;
    }
</style>
<div class="box">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
</div>

第三种：flex布局

 html{
        height: 100%;
    }
    body{
        height: 100%;
    }
    .box{
        width: 100%;
        height: 100%;
        display: flex;
    }
    .left{
        width: 200px;
        height: 100%;
        background-color: aqua;
    }
    .right{
        width: 200px;
        height: 100%;
        background-color: blue;
    }
    .middle{
        background-color: black;
        flex:1;
        height: 100%;
    }
</style>
<div class="box">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
</div>

第四种：定位实现

<style>
    html{
        height: 100%;
    }
    body{
        height: 100%;
    }
    .box{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .left{
        width: 200px;
        height: 100%;
        background-color: aqua;
        position: absolute;
        left: 0;
    }
    .right{
        width: 200px;
        height: 100%;
        background-color: blue;
        position: absolute;
        right: 0;
    }
    .middle{
        background-color: black;
        width: calc(100% - 400px);
        height: 100%;
        position: absolute;
        left: 200px;
    }
</style>
<div class="box">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
</div>

效果都是：
在这里插入图片描述

第五种：双飞翼布局

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

    .container {
        height: 100%;
    }

    .center {
        width: 100%;
        height: 100%;
        background-color: burlywood;
        float: left;
    }

    .middle {
        width: 100%;
        height: 100%;
        margin: 0 200px;
    }

    .left {
        width: 200px;
        height: 100%;
        float: left;
        background-color: cadetblue;
    }

    .right {
        width: 200px;
        height: 100%;
        float: left;
        background-color: coral;
    }
</style>

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

第六种：圣杯布局

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

    .container {
        width: 100%;
        height: 100%;
    }
    .middle {
        width: 100%;
        height: 100%;
        background-color: cornflowerblue;
        padding: 0 200px;
        box-sizing: border-box;
        float: left;
    }

    .left {
        width: 200px;
        height: 100%;
        background-color: cyan;
        margin-left: -100%;
        float: left;
    }

    .right {
        width: 200px;
        height: 100%;
        background-color: darkcyan;
        margin-left: -200px;
        float: left;
    }
</style>
<div class="container">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

双飞翼布局和圣杯布局很类似，不同的地方在于left和right块的位置相对于谁而言。这两种方法跟前面几种不同的还有加载顺序，这两种是浏览器先加载中间的再加载两边的，所以看需求吧。

%程序羊%

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
三栏布局的实现(左右固定宽，中间自适应)

第一种使用float布局<style> html{ height: 100%; } body{ height: 100%; } .box{ width: 100%; height: 100%; } .left{ width: 200px; height: 100%; background-color: aqua;
复制链接

扫一扫