【CSS/HTML】实现可扩展性的页面布局

文章目录

前面有一篇文章讲过 《css实现两列布局,一列固定宽度,一列宽度自适应方法》,主要是讲实现一列固定宽度,一列宽度自适应的几种方法。

下面我在总结一下一般的三种扩展布局,这儿所示的扩展布局很常规,有的童鞋会说使用column或者flex啥的布局不是很方便吗,但是你也要看它的支持程度吧,比如你在手机端使用,那当然很好,那我要兼容IE8,IE9呢?

1.左右结构,左边100%;右边宽度固定

css代码:

复制代码
#header{height:80px; background:#CCC;}
#center{overflow:hidden; zoom:1;}
#main_wrapper{float:left; width:100%; margin-top:10px; margin-left:-210px;}
#main{height:200px; margin-left:210px; background:#999;}
#sidebar{float:right; width:200px; margin-top:10px; height:200px; background:#AAA;}
#footer{height:50px; margin-top:10px; background:#CCC;}

HTML代码:

复制代码
<div id="header"></div>
<div id="center">
    <div id="main_wrapper">
        <div id="main"></div>
    </div>
    <div id="sidebar"></div>
</div>
<div id="footer"></div>

2.左右结构,左边固定,右边100%

css代码:

复制代码
#header{height:80px; background:#CCC;}
#center{overflow:hidden; zoom:1;}
#sidebar{float:left; width:200px; margin-top:10px; height:200px; background:#AAA;}
#main_wrapper{float:right; width:100%; margin-top:10px; margin-left:-210px;}
#main{height:200px; margin-left:210px; background:#999;}
#footer{height:50px; margin-top:10px; background:#CCC;}

HTML代码:

复制代码
<div id="header"></div>
<div id="center">
    <div id="sidebar"></div>
    <div id="main_wrapper">
        <div id="main"></div>
    </div>
</div>

3.左中右结构,左边固定,右边固定,中间100%

css代码:

复制代码
#header{height:80px; background:#CCC;}
#center{overflow:hidden; zoom:1;}
#sidebar-l {float:left; width:200px; margin-top:10px; height:200px; background:#AAA;}
#main-wrapper {margin-top:10px; float:left; width:100%; margin-left:-420px; height:200px;}
#main {margin-left:438px; background:#999; height:200px;}
#sidebar-r {float:right; width:200px; margin-top:10px; height:200px; background:#AAA;}
#footer{height:50px; margin-top:10px; background:#CCC;}

HTML代码:

复制代码
<div id="header"></div>
<div id="center">
    <div id="sidebar-l">这里是左边</div>
    <div id="main-wrapper">
        <div id="main">这里是中间</div>
    </div>
    <div id="sidebar-r">这里是右边</div>
</div>
<div id="footer"></div>
相关推荐
前端小巷子2 分钟前
CSS 单位指南
前端·css
St2 分钟前
探索JavaScript原型链设计——详解prototype、__proto__及constructor三者之间的关系
前端·javascript
前端大白话3 分钟前
JavaScript中`Symbol.for()`和`Symbol()`的区别,在创建全局唯一的`Symbol`值时如何选择使用?
前端·javascript·设计模式
喵爱吃鱼3 分钟前
原来这就是react设计模式啊
前端·javascript·react.js
前端大白话5 分钟前
前端必看!90% 工程师踩过的状态管理坑,useReducer 如何一招化解?
前端·javascript·react.js
前端大白话5 分钟前
揭秘 HTML 可拖动元素及拖放功能:HTML5 API 大起底
前端·javascript·html
Moment22 分钟前
通过爬取 B 站热门视频来带你彻底了解 Playwright 🤷🏿‍♂️🤷🏿‍♂️🤷🏿‍♂️
前端·javascript·后端
Java~~38 分钟前
山东大学软件学院项目实训-基于大模型的模拟面试系统-前端美化滚动条问题
前端
掘金安东尼1 小时前
🧭 前端周刊第411期(2025年4月21日–27日)
前端·javascript·面试
喝养乐多长不高1 小时前
详细PostMan的安装和基本使用方法
java·服务器·前端·网络协议·测试工具·https·postman