css多栏自适应布局_html/css_WEB-ITnose
css多栏自适应布局还是需要总结一下的，都是基本功。
一般使用position属性布局，或者用float属性布局，也可以使用display属性。
看资料说position适合首页布局，因为首页内容往往可以完全控制。float适合模板布局，模板中填充的内容无法控制。
一、左侧尺寸固定右侧自适应1、浮动实现
在css浮动一文已介绍过。
.left{ width: 150px; float: left; } /*流体布局*/.right { margin-left: 150px;}登录后复制
原理：左侧定宽浮动，右侧使用margin-left，且不要定宽，容器尺寸变化右侧可自适应
<!DOCTYPE html><meta charset="utf-8"/><html><head> <title></title> <style type="text/css">.left { width: 150px; float: left; background-color: pink;}/*流体布局*/.right { margin-left: 150px; background-color: green;} </style></head><body> <div class="left"> 左侧内容固定---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左 </div> <div class="right"> 右侧内容自适应----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右 </div></body></html>登录后复制
2、绝对定位实现
.container{width: 100%;position: relative;padding-left: 150px;}.left {width: 150px;position: absolute;left: 0;}/*流体布局*/.right {width: 100%;}登录后复制
原理：重点是container设置padding-left给left腾出空间，left相对于containr绝对定位，right占满剩余空间。
<!DOCTYPE html><meta charset="utf-8"/><html><head> <title>2 columns layout of starof</title><style type="text/css">.container { width: 100%; position: relative; padding-left: 150px;}.left { width: 150px; position: absolute; left: 0; background-color: pink;}/*流体布局*/.right { width: 100%; background-color: green;}</style></head><body> <div class="container"> <div class="left"> 左侧内容 <strong>固定</strong> ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左 </div> <div class="right"> 右侧内容 <strong>自适应</strong> ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右 </div> </div></body></html>登录后复制
3、BFC实现
.left {width: 150px;float: left;}.right {display: table-cell;}登录后复制
原理：左栏定宽浮动，右栏生成BFC，根据BFC特性，与浮动元素相邻的，创建了BFC的元素，都不能与浮动元素相互覆盖。
<!DOCTYPE html><meta charset="utf-8"/><html><head> <title>2 columns layout of starof</title><style type="text/css">.left { width: 150px; float: left; background-color: pink;}/*流体布局*/.right { display: table-cell; background-color: green;}</style></head><body> <div class="left"> 左侧内容 <strong>固定</strong> ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左 </div> <div class="right"> 右侧内容 <strong>自适应</strong> ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右 </div></body></html>登录后复制
效果同上。
4、table实现
.container {width: 100%;display: table;}.left {width: 150px;display: table-cell;}.right {display: table-cell;}登录后复制
原理：不说了。
<!DOCTYPE html><meta charset="utf-8"/><html><head> <title>2 columns layout of starof</title><style type="text/css">.container { width: 100%; display: table;}.left { width: 150px; display: table-cell; background-color: pink;}.right { display: table-cell; background-color: green;}</style></head><body> <div class="container"> <div class="left"> 左侧内容 <strong>固定</strong> ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左 </div> <div class="right"> 右侧内容 <strong>自适应</strong> ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右 </div> </div></body></html>登录后复制
二、 右侧尺寸固定，左侧自适应的流体布局
1、不改变DOM位置的写法【用的比较多】
在css浮动一文已介绍过。
.wrap { width: 100%; float: left; background-color: green;}.left { margin-right: 150px;}.right { width: 150px; float: left; margin-left: -150px; background-color: pink;}登录后复制
原理：给left包裹一层wrap，wrap用来布局，left调整内容。
wrap和right都左浮动，这样right会超过视口，通过设置margin-left负值拉回。
此时right回到窗口，但会覆盖wrap内容。left就派上用场了，left设置margin-right将内容拉回。此时布局和内容都达到目的，完成！
<!DOCTYPE html><meta charset="utf-8"/><html><head> <title></title><style type="text/css">.wrap { width: 100%; float: left; background-color: green;}.left { margin-right: 150px;}.right { width: 150px; float: left; margin-left: -150px; background-color: pink;}</style></head><body> <div class="wrap"> <div class="left"> 左侧内容 <strong>自适应</strong> ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左 </div> </div> <div class="right"> 右侧内容 <strong>固定</strong> ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右 </div></body></html>登录后复制
2、改变DOM位置的写法
在css浮动一文已介绍过。
.right{float: right;width: 150px;}.left{margin-right: 150px;}登录后复制
原理：因为右边先渲染，右边右浮动，左边设margin-right即可。
<!DOCTYPE html><meta charset="utf-8"/><html><head> <title>2 columns layout of starof</title> <style type="text/css">.left { margin-right: 150px; background-color: green;}.right { width: 150px; float: right; background-color: pink;}</style></head><body> <div class="right"> 右侧内容 <strong>固定</strong> ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右 </div> <div class="left"> 左侧内容 <strong>自适应</strong> ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左 </div></body></html>登录后复制
在css浮动一文已介绍过。
.left {float: left;}.right{display: table-cell;}登录后复制
原理：左栏左浮动，右栏生成BFC，根据BFC特性：与浮动元素相邻的、创建了BFC的元素，都不能与浮动元素相互覆盖。
<!DOCTYPE html><meta charset="utf-8"/><html><head> <title>2 columns layout of starof</title> <style type="text/css">.left { float: left; background-color: green;}img{ width: 100px; height: 100px;}.right { display: table-cell; background-color: pink;}</style></head><body> <div class="left"> <img src="/static/imghw/default1.png" data-src="img/sheep.png" class="lazy" alt="css多栏自适应布局_html/css_WEB-ITnose" ></div> <div class="right"> 右侧内容 <strong>自适应</strong> ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右 </div></body></html>登录后复制
缺点：由于IE6并不支持display:table-cell，用css hack弥补，右侧设定overflow:auto;zoom:1或者overflow:hidden;zoom:1。
.right{ display:table-cell;_display:block;zoom:1;}登录后复制
应用案例：红色框部分，两栏自适应，左右都不定宽，右侧栏数量不定。
四、三栏布局，左右定宽，中间内容自适应1、float+margin实现
.left {width: 150px;float: left;}.right {width: 100px;float: right;}.content {margin-right: 100px;margin-left: 150px;}.footer {clear: both;}登录后复制
原理：用float实现。
左边定宽左浮动，右边定宽右浮动，中间margin调整左右间距，底部清除浮动。
Note:left和right的html代码写在content之前，先渲染。
<!DOCTYPE><html> <meta charset="utf-8"/><head> <title>3 columns layout of starof</title> <style type="text/css">.header { background-color: gray;}.left { background-color: pink; width: 150px; float: left;}.right { background-color: pink; float: right; width: 100px;}.content { background-color: green; margin-right: 100px; margin-left: 150px;}.footer { background-color: grey; clear: both;}</style></head><body> <div id="page"> <div class="header"> <h1 id="标题">标题</h1> </div> <div class="left"> <p> left <strong>固定</strong> -----------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左 </p> </div> <div class="right"> <p> right <strong>固定</strong> ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右 </p> </div> <div class="content"> <p>内容区域</P> <p> content <strong>自适应</strong> --------------自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应 </p> </div> <div class="footer"> <p>页脚</P> </div> </div></body></html>登录后复制
缺点：
DOM顺序和视觉顺序不同，关键的主体内容在文档后面，主次不合理。如果右栏包含大量脚本资源，可能影响甚至阻塞整个页面的载入。不适合用做整站页面框架的搭建。
2、float+负margin实现
原理：分而治之，多封装一层，两两处理。
原理简单，处理起来稍复杂，我分步说明。
步骤一：先处理好right布局，wrap和right都右浮动，即应用上面【右侧尺寸固定，左侧自适应的流体布局】的第一中方法。
<!DOCTYPE html><meta charset="utf-8"/><html><head> <title></title><style type="text/css">.wrap { width: 100%; float: left; background-color: green;}.leftwrap { margin-right: 150px;}.right { width: 150px; float: left; margin-left: -150px; background-color: pink;}</style></head><body> <div class="wrap"> <div class="leftwrap"> 留空 </div> </div> <div class="right"> 右侧内容 <strong>固定</strong> ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右 </div></body></html>登录后复制
目前的效果是这样：
将左边leftwrap留空部分补上下面结构
<div class="contentwrap"> <div class="content">主体部分</div></div><div class="left">左侧栏</div>
登录后复制
步骤二：再处理left和content布局，contentwrap右浮动，left左浮动，完成。
<!DOCTYPE html><meta charset="utf-8"/><html><head> <title>3 columns layout of starof</title><style type="text/css">/*步骤一：先处理好right布局，wrap和right都右浮动*/.wrap { width: 100%; float: left; } /*wrap控制布局*/.leftwrap { margin-right: 150px; }/*leftwrap控制内容*/.right { width: 150px; float: left; margin-left: -150px; background-color: pink; }/*步骤二：再处理left和content布局，contentwrap右浮动，left左浮动*/.contentwrap { float: right; width: 100%; }/*contentwrap控制主体内容布局*/.left { float: left; width: 200px; margin-right: -200px; background-color: pink; }.content { margin-left: 200px; background-color: green; }/*content控制主体内容*/</style></head><body> <div class="wrap"> <div class="leftwrap"> <div class="contentwrap"> <div class="content">content<strong>自适应</strong></div> </div> <div class="left"> 左侧内容 <strong>固定</strong> ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左</div> </div> </div> <div class="right"> 右侧内容 <strong>固定</strong> ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右 </div></body></html>登录后复制
缺点：嵌套多层标签，html文档不够简洁。
总结：如果不是必要，浮动布局不要轻易定宽高，尽量自适应。
本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：有问题欢迎与我讨论，共同进步。
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前
By DDD
R.E.P.O.如果您听不到任何人，如何修复音频
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解锁Myrise中的所有内容
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
＆gt; gt;的目的是什么 元素？
Mar 21, 2025 pm 12:34 PM
本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati
＆lt; datalist＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:33 PM
本文讨论了html＆lt; datalist＆gt;元素，通过提供自动完整建议，改善用户体验并减少错误来增强表格。Character计数：159
＆lt; meter＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:35 PM
本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前
我如何使用html5＆lt; time＆gt; 元素以语义表示日期和时间？
Mar 12, 2025 pm 04:05 PM
本文解释了HTML5＆lt; time＆gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性（ISO 8601格式）的重要性，并在人类可读文本旁边，增强Accessibilit
如何使用HTML5表单验证属性来验证用户输入？
Mar 17, 2025 pm 12:27 PM
本文讨论了使用HTML5表单验证属性，例如必需的，图案，最小，最大和长度限制，以直接在浏览器中验证用户输入。
视口元标签是什么？为什么对响应式设计很重要？
Mar 20, 2025 pm 05:56 PM
本文讨论了视口元标签，这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互，而滥用可能会导致设计和可访问性问题。
＆lt; iframe＆gt;的目的是什么。 标签？使用时的安全考虑是什么？
Mar 20, 2025 pm 06:05 PM
本文讨论了＆lt; iframe＆gt;将外部内容嵌入网页，其常见用途，安全风险以及诸如对象标签和API等替代方案的目的。
