CSS-三列布局(中间固定，两边自适应)

小沐°

于 2024-03-27 16:54:49 发布

阅读量538

点赞数 2

分类专栏： css(less、sass) 文章标签： css 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_46479909/article/details/137082590

版权

css(less、sass) 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用HTML和CSS中的flexbox属性，使网页中的一列始终保持在屏幕中间，同时左右两侧元素向中间对齐并保持一定间距，实现了灵活的响应式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：中间一列固定在屏幕中间，左右两侧向中间对齐，并设置一定距离

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        html, body {
            margin: 0; /*若不设置，默认为8px*/
        }
 
        .container>div {
            height: 100px;
        }
 
        .container {
            display:flex;
            flex-direction:row;
        }
 
        .aside-left {
            flex-grow: 1;
            text-align: right;
            width: 40%;
            background-color: #a9ff29;
        }
 
        .middle {
            width:2%;
            margin-left:100px;
            margin-right:100px;
            background-color: #ffb91b;
        }
 
        .aside-right {
            flex-grow: 1;
            width: 40%;
            background-color: #40c3ff;
        }
    </style>
</head>
 
<body>
 
<div class="container">
    <div class="aside-left">左侧</div>
    <div class="middle">中间</div>
    <div class="aside-right">右侧</div>
</div>
 
</body>
</html>