如何实现 css3 的三列布局的功能？

发布时间：2023-07-26 14:12:10 所属栏目：语言来源：

导读：css3怎么样做三栏布局？在CSS中想要实现三栏布局有很多方法，这篇文章就给大家分享一下简单容易上手的方法，也就是用css3弹性盒子flexl来实现三栏布局，那么具体怎样做呢？下面我们来看一个示例。

如题：高度

css3怎么样做三栏布局？在CSS中想要实现三栏布局有很多方法，这篇文章就给大家分享一下简单容易上手的方法，也就是用css3弹性盒子flexl来实现三栏布局，那么具体怎样做呢？下面我们来看一个示例。

    如题：高度已知，左右栏宽度300px，中间自适应：

    弹性盒子本身就是并排的，我们设置宽度即可。

    用一个容器container包裹三栏，设置comtainer容器的display属性为flex，左右栏设置宽度为300px，中间栏设置flex:1，这里的1表示宽度比例，具体数值取决于其它盒子的flex值，由于这里其它盒子宽度固定，所以中间栏会自动填充：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>三栏布局</title>

</head>

<style type="text/css">

    html*{

        margin: 0;

        padding: 0;

    }

    .container{

        display: flex;

    }

    .left{

        background-color: aqua;

        width: 300px;

        height: 100px;

    }

    .center{

        height: 100px;

        flex: 1;

        background: #f296ff;

    }

    .right{

        height: 100px;

        background-color: #6ee28d;

        width: 300px;

    }

</style>

<body>



<div class="container">

    <div class="left"></div>

    <div class="center"></div>

    <div class="right"></div>

</div>

</body>

</html>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!