几种css自适应布局方式

最新推荐文章于 2024-08-09 16:21:47 发布

英特纳雄耐尔先生

最新推荐文章于 2024-08-09 16:21:47 发布

阅读量4.6k

点赞数 1

本文链接：https://blog.csdn.net/sinat_19594515/article/details/102989269

版权

本文介绍了五种CSS自适应布局方法，包括float配合margin、绝对定位、box包裹浮动元素、圣杯布局和双飞翼布局。重点讲解了这两种三栏布局的实现差异，强调中间元素需最先渲染以确保自适应效果。

摘要由CSDN通过智能技术生成

1.float+margin（自适应的那个元素），适应横向布局

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>左中右三列 左右固定200px 中间自适应占满</title>
    <style>
        body {
            margin: 0;
            height: 100%;
            padding: 0;
            font-size: 30px;
            font-weight: 500;
            text-align: center;
        }

        .left {
            width: 200px;
            height: 500px;
            background-color: red;
            float: left;
        }

        .right {
            width: 200px;
            height: 500px;
            background-color: #00f;
            float: right;
        }

        .zhong {
            height: 500px;
            margin: 0 200px;
            background-color: #f0f;
        }
    </style>
</head>

<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="zhong"></div>  
</body>

</html>

2.float+绝对定位（自适应的那个元素），适应横向布局

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>左中右三列 左右固定200px 中间自适应占满</title>
    <style>
        body {
            margin: 0;
            height: 100%;
            padding: 0;
            font-size: 30px;
            font-weight: 500;
            text-align: center;
        }

        .left {
            width: 200px;
            height: 500px;
            background-color: red;
            float: left;
        }