10. 左右宽度固定300px，中间自适应，5种布局方案

最新推荐文章于 2025-03-29 20:26:01 发布

weixin_30852451

最新推荐文章于 2025-03-29 20:26:01 发布

阅读量157

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zouxinping/p/9341010.html

本文介绍两种实现三栏布局的方法：浮动布局与绝对定位布局。浮动布局通过设置左右两栏浮动，中间栏自然填充；绝对定位布局则直接为各栏设置精确的位置属性。这两种方法适用于不同场景，帮助开发者灵活应对网页布局需求。

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

1、浮动解决方案

<section class="layout float">
    <style>
        .layout.float .left{
            float: left;
            width: 300px;
            background: red;
        }
        .layout.float .right{
            float: right;
            width: 300px;
            background: blue;
        }
        .layout.float .center{
            background: yellow;
        }
    </style>
    <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <h1>浮动解决方案</h1>
            1.这是三栏布局中间部分
            2.这是三栏布局中间部分
        </div>
    </article>
</section>

2、绝对定位absolute解决方案

<section class="layout absolute">
    <style>
        .layout.absolute .left-right-center > div{
            position: absolute;
        }
        .layout.absolute .left{
            left: 0;
            width: 300px;
            background: red;
        }
        .layout.absolute .center{
            left: 300px;
            right: 300px;
            background: yellow;
        }
        .layout.absolute .right{
            right: 0;
            width: 300px;
            background: blue;
        }
    </style>
    <article class="left-right-center">
        <div class="left"></div>
        <div class="center">
            <h1>绝对定位解决方案</h1>
            1.这是三栏布局绝对定位中间部分
            2.这是三栏布局绝对定位中间部分
        </div>
        <div class="right"></div>
    </article>
</section>