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

最新推荐文章于 2022-03-20 20:01:48 发布

平凡的人平凡的世界

最新推荐文章于 2022-03-20 20:01:48 发布

阅读量631

点赞数

分类专栏： css 前端

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

版权

题目：设高度已知，请写出三栏布局，其中左栏和右栏宽度各为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元/天解锁文章

平凡的人平凡的世界

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
三栏布局的七种方案及优缺点对比总结

题目：设高度已知，请写出三栏布局，其中左栏和右栏宽度各为300px，中间自适应。常见的布局方式: 浮动(float)布局、定位(Position)布局、弹性(flex)布局、表格(table)布局、网格(grid)布局、圣杯布局、双飞翼布局。公共样式首先把公共样式放在头部，代码如下：<head> <meta charset="UTF-8"> <title>页面布局</title> <style media=
复制链接

扫一扫