三栏布局的七种方案及优缺点对比总结

最新推荐文章于 2023-01-31 20:14:15 发布

平凡的人平凡的世界

最新推荐文章于 2023-01-31 20:14:15 发布

阅读量835

点赞数

分类专栏： css 前端

本文链接：https://blog.csdn.net/QingChunDeZhanYi/article/details/114107309

版权

本文详细介绍了三栏布局的七种实现方案，包括浮动布局、定位布局、弹性布局、表格布局、网格布局、圣杯布局和双飞翼布局，分析了各自的优缺点。浮动布局和定位布局兼容性好但存在占位和高度塌陷问题，弹性布局解决了这些问题但不兼容IE8，表格布局简单但高度适应性有限，网格布局简化复杂布局，圣杯和双飞翼布局则提供了更灵活的解决方案。选择布局方式时需结合业务需求和浏览器兼容性考虑。

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

题目：设高度已知，请写出三栏布局，其中左栏和右栏宽度各为300px，中间自适应。
常见的布局方式: 浮动(float)布局、定位(Position)布局、弹性(flex)布局、表格(table)布局、网格(grid)布局、圣杯布局、双飞翼布局。

公共样式
首先把公共样式放在头部，代码如下：

<head>
    <meta charset="UTF-8">
    <title>页面布局</title>    

    <style media="screen">
        html *{
            padding: 0;
            margin: 0;
        } 
        .layout{
            margin-top:30px;
        }
        .layout article div{
            min-height:100px;
        }
    </style>
</head>

不同布局方式使用

标签区别，该标签来定义文档中的节（section、区段）；标签规定独立的自包含内容。

1、浮动(float)布局

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

优点：兼容性较好；代码简单；清除浮动处理好的前提下一般没有其他问题。
缺点：脱离文档流，出现占位问题(如上图-中间部分在块中内容超出时占了左右的位置)；清除浮动做不好出现高度塌陷问题(解决方法)。

2、定位(Position)布局

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

最低0.47元/天解锁文章