CSS3页面布局-三栏-中栏流动布局

三栏-中栏流动布局

用负外边距实现

实现三栏布局且中栏内容区不固定的核心问题就是处理右栏的定位,

并在中栏内容区大小改变时控制右栏与布局的关系。

控制两个外包装容器的外边距,一个包围三栏,一个包围左栏和中栏。

html 复制代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>5.2 三栏-固定宽度布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font: 1em helvetica, arial, sans-serif;
        }

        div#main_wrapper {
            min-width: 600px;
            max-width: 1100px;
            margin: 0 auto;
            background: #eee;
        }

        header {
            padding: 5px 10px;
            background: #3f7ccf;
        }

        div#threecolwrap {
            float: left;
            width: 100%;
        }

        div#twocolwrap {
            float: left;
            width: 100%;
            margin-right: -210px;
        }

        nav {
            float: left;
            width: 150px;
            background: #f00;
            padding: 20px 0;
        }

        nav>* {
            margin: 0 10px;
        }

        li {
            list-style-type: none;
        }

        article {
            width: auto;
            margin-left: 150px;
            margin-right: 210px;
            background: #eee;
            padding: 20px 0;
        }

        article>* {
            margin: 0 20px;
        }

        aside {
            float: left;
            width: 210px;
            background: #ffed53;
            padding: 20px 0;
        }

        aside>* {
            margin: 0 10px;
        }

        footer {
            color: aliceblue;
            clear: both;
            width: 100%;
            text-align: center;
            background: #000;
        }
    </style>
</head>

<body>
    <div id="main_wrapper">
        <header>
            头部
        </header>
        <div id="threecolwrap"><!-- 三栏外包装 -->
            <div id="twocolwrap"><!-- 两栏外包装,左中栏 -->
                <nav>
                    <!-- 无序列表 -->
                    <ul>
                        <li>Link1</li>
                        <li>Link2</li>
                        <li>Link3</li>
                    </ul>
                </nav>
                <article>
                    <!-- 文本元素 -->
                    <h1>四川合江气温达42.2℃ 连续两天热到全国第一</h1>
                    <p>
                        【四川合江气温达42.2℃ 连续两天热到全国第一】财联社8月22日电,
                        据中央气象台官网信息,截至8月22日17时,在逐小时气温实况排行榜中,
                        川渝地区气温在当天11时至17时连续7个小时霸榜全国高温榜"前十"。
                        其中,四川合江在17时以42.2℃热到了全国第一。
                        而在8月21日下午,四川合江的气温也突破40℃,登顶全国高温榜第一。
                    </p>
                    <hr />
                    <h1>外交部回应黑神话悟空全球大热</h1>
                    <p>
                        21日,外交部发言人毛宁就"中国的国产游戏《黑神话:悟空》上线后,受到国际玩家青睐"作出回应:反映了中国文化的吸引力。
                    </p>
                </article>
            </div>
            <aside>
                <h1>这是一个侧边栏</h1>
                <p>
                    今年是南开大学建校105周年。8月21日,南开大学2001级校友、字节跳动创始人张一鸣与南开大学2001级校友、字节跳动CEO梁汝波共同捐赠人民币2亿元,主要用于支持南开数学研究和人才培养。
                </p>
            </aside>
        </div>
        <footer>
            这是页脚
        </footer>
    </div>
</body>

</html>
相关推荐
m0_748255262 分钟前
easyExcel导出大数据量EXCEL文件,前端实现进度条或者遮罩层
前端·excel
web1478621072335 分钟前
C# .Net Web 路由相关配置
前端·c#·.net
m0_7482478036 分钟前
Flutter Intl包使用指南:实现国际化和本地化
前端·javascript·flutter
飞的肖40 分钟前
前端使用 Element Plus架构vue3.0实现图片拖拉拽,后等比压缩,上传到Spring Boot后端
前端·spring boot·架构
青灯文案11 小时前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http
m0_748254881 小时前
DataX3.0+DataX-Web部署分布式可视化ETL系统
前端·分布式·etl
ZJ_.1 小时前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营1 小时前
Vue零基础教程|从前端框架到GIS开发系列课程(七)响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood2 小时前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
学代码的小前端2 小时前
0基础学前端-----CSS DAY9
前端·css