中间固定左右自适应 css写法

最新推荐文章于 2024-12-04 20:35:30 发布

原创最新推荐文章于 2024-12-04 20:35:30 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现三栏布局的方法，其中中间栏固定宽度并居中显示，左右两栏分别占据剩余空间。通过绝对定位和margin属性，实现了响应式设计，适用于不同屏幕尺寸。

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

html：
<div class="container">
    <div class="left">
         <div class="left-container">

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

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

        </div>
    </div>
</div>

css:

<style>
    .container{
        position: absolute;
        top:0;
        bottom: 0;
        left:0;
        right:0;
    }
    .center{
        position: absolute;
        width: 200px;
        height: 100%;
        left:50%;
        margin-left: -100px;
        z-index: 100;
        background-color: red;
    }
    .left{
        position: absolute;
        top:0;
        bottom: 0;
        left:0;
        width: 50%;
    }
    .right{
        position: absolute;
        top:0;
        bottom: 0;
        right:0;
        width: 50%;
    }
    .left-container{
        margin-right: 100px;
        background-color: #00a854;
        height: 100%;
    }
    .right-container{
        margin-left: 100px;
        background-color: #ca900e;
        height: 100%;
    }
</style>