左右固定中间自适应并优先加载的布局

最新推荐文章于 2022-04-09 21:43:24 发布

小鸟哗啦啦

最新推荐文章于 2022-04-09 21:43:24 发布

阅读量360

点赞数 1

分类专栏： HTML5 布局文章标签： html

本文链接：https://blog.csdn.net/vampire10086/article/details/107928291

版权

HTML5 同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

布局

1 篇文章 0 订阅

订阅专栏

中间优先加载的意思就是说，中间这部分需要放在左右部分之前，先被解析加载。

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>自适应宽度，左右两栏固定宽度，中间栏优先加载</title>
    <style>
        .container {
            display: -moz-box;
            display: -webkit-box;
        }

        div {
            padding: 10px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        .sider_l {
            width: 250px;
            -moz-box-ordinal-group: 1;
            -webkit-box-ordinal-group: 1;
            background: limegreen;
        }

        .middle_content {
            -moz-box-flex: 1;
            -webkit-box-flex: 1;
            -moz-box-ordinal-group: 2;
            -webkit-box-ordinal-group: 2;
            background: lightpink;
        }

        .sider_r {
            width: 250px;
            -moz-box-ordinal-group: 3;
            -webkit-box-ordinal-group: 3;
            background: green;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="middle_content">优先加载主内容区，优先加载也就是这部分内容要处于整个布局结构的最前面</div>
        <div class="sider_l">左边栏</div>
        <div class="sider_r">右边栏</div>
    </div>
</body>

</html>

小鸟哗啦啦

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
左右固定中间自适应并优先加载的布局

中间优先加载的意思就是说，中间这部分需要放在左右部分之前，先被解析加载。<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>自适应宽度，左右两栏固定宽度，中间栏优先加载</title> <style> .container
复制链接

扫一扫