页面自适应布局

最新推荐文章于 2025-05-17 14:11:56 发布

原创最新推荐文章于 2025-05-17 14:11:56 发布 · 662 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css

学习专栏收录该内容

12 篇文章

订阅专栏

题目：三栏布局，高度一定，左右各为300px，中间自适应宽度

方法一：采用浮动方式

浮动布局是有局限性的，浮动元素是脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷等。
浮动布局的优点就是比较简单，兼容性也比较好。只要清除浮动做的好，是没有什么问题的。

方法二：采用绝对定位

绝对定位布局优点，很快捷，设置很方便，而且也不容易出问题，你可以很快的就能想出这种布局方式。
缺点就是，绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的。

方法三：采用table表格

表格布局在历史上遭到很多人的摒弃，说表格布局麻烦，操作比较繁琐，其实这是一种误解，在很多场景中，表格布局还是很适用的，比如这个三栏布局，用表格布局就轻易写出来了。还有表格布局的兼容性很好，在flex布局不兼容的时候，可以尝试表格布局。
表格布局也是有缺陷的，当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，而有时候这种效果不是我们想要的。

方法四：采用flex布局

felxbox布局是css3里新出的一个，它就是为了解决table和position方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用flexbox。
felxbox的缺点就是不能兼容IE8及以下浏览器。

方法五：采用grid网格布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自适应布局</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .layout{
        margin-bottom: 20px;
    }
    .layout .left-center-right>div{
        height:100px;
    }
</style>
<body>
<!--float实现-->
<section class="layout float">
    <style>

        .layout.float .left-center-right .left{
            float: left;
            width: 300px;
            background: red;
        }
        .layout.float .left-center-right .center{
            background: yellow;
        }
        .layout.float .left-center-right .right{
            float: right;
            width: 300px;
            background: blue;
        }


    </style>
    <action class="left-center-right">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <h2>float实现自适应布局</h2>
        </div>

    </action>
</section>
<!--position实现-->
<section class="layout position">
    <style>
            .layout.position .left-center-right .left{
                position: absolute;
                left: 0;
                width: 300px;
                background: red;
            }
            .layout.position .left-center-right .center{
                position: absolute;
                left: 300px;
                right: 300px;

                background: yellow;
            }
            .layout.position .left-center-right .right{
                position: absolute;
                right: 0;
                width: 300px;
                background: blue;
            }
    </style>
    <action class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h2>position实现自适应布局</h2>
        </div>
        <div class="right"></div>
    </action>
</section>
<!--table表格实现-->
<section class="layout table">
    <style>
        .layout.table{
            margin-top: 150px;
        }
        .layout.table .left-center-right{
            display: flex;
            width:100%;
        }
        .layout.table .left-center-right>div{
            display: table-cell;
        }
        .layout.table .left-center-right .left{
            width: 300px;
            background: red;
        }
        .layout.table .left-center-right .center{
            background: yellow;
        }
        .layout.table .left-center-right .right{
            width: 300px;
            background: blue;
        }
    </style>
    <action class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h2>table表格实现自适应布局</h2>
        </div>
        <div class="right"></div>
    </action>
</section>
<!--flex实现-->
<section class="layout flexbox">
    <style>
        .layout.flexbox .left-center-right{
            display: flex;
        }
        .layout.flexbox .left-center-right .left{
            width: 300px;
            background: red;
        }
        .layout.flexbox .left-center-right .center{
            flex:1;
            background: yellow;
        }
        .layout.flexbox .left-center-right .right{
            width: 300px;
            background: blue;
        }
    </style>
    <action class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h2>flex实现自适应布局</h2>
        </div>
        <div class="right"></div>
    </action>
</section>
<!--grid 实现-->
<section class="layout grid">
    <style>
        .layout.grid .left-center-right {
            display: grid;
            grid-template-columns: 300px auto 300px;
        }
        .layout.grid .left-center-right .left{
            background: red;
        }
        .layout.grid .left-center-right .center{
            background: yellow;
        }
        .layout.grid .left-center-right .right{
            background: blue;
        }
    </style>
    <action class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h2>grid实现自适应布局</h2>
        </div>
        <div class="right"></div>
    </action>
</section>
</body>
</html>