# css布局实例

- Link: https://yjyj.net/learn/3901.html
- Published: 2006-04-01T01:45:17+08:00
- Author: 小 虾

🔄 2026 实时联网保鲜核验（2026-11-11）：这套 2006 年的绝对定位三栏法在 2026 年仍能跑，但已非首选；当前主流是 CSS Grid 或 Flexbox，尤其三栏与响应式布局更适合用网格，absolute 只适合少量叠放与特殊定位，且要注意缩放与可访问性。⚡ 生猛大蝦编辑部 · 30 秒核心看点固定宽度三列布局：左中右分别 200/300/280px，核心靠绝对定位排版。body 先统一字体、背景、字号和行高，页面基础视觉一次定好。100% 高度在这里不如预期，作者改用临时固定高度并反思 table 思维。定义body样式 先定义整个页面的body的样式,代码如下： body { margin: 0px; padding: 0px; background: url(../images/bg_logo.gif) #fefefe no-repeat right bottom; font-family: ‘lucida grande’,’lucida sans unicode’,’宋体’,’新宋体’,arial,verdana,sans-serif; color: #666; font-size:12px; line-height:150%; } 以上代码的作用在上一天的教程有详细说明，大家应该一看就明白。定义了边框边距为0；背景颜色为#fefefe，背景图片为bg_logo.gif，图片位于页面右下角，不重复；定义了字体尺寸为12px；字体颜色为#666;行高150%。 3.定义主要的div 初次使用css布局，我决定采用固定宽度的三列布局(比自适应分辨率的设计简单,hoho，别说我偷懒，先实现简单的，增加点信心嘛！)。分别定义左中右的宽度为200:300:280，在css中如下定义: /*定义页面左列样式*/ #left{ width:200px; margin: 0px; padding: 0px; background: #cdcdcd; } /*定义页面中列样式*/ #middle{ position: absolute; left:200px; top:0px; width:300px; margin: 0px; padding: 0px; background: #dadada; } /*定义页面右列样式*/ #right{ position: absolute; left:500px; top:0px; width:280px; margin: 0px; padding: 0px; background: #fff; } 注意：定义中列和右列div我都采用了position: absolute;，然后分别定义了left:200px;top:0px;和left:500px;top:0px;这是这个布局的关键，我采用了层的绝对定位。定义中间列距离页面左边框200px，距离顶部0px；定义右列距离页面左边框500px，距离顶部0px；。 这时候整个页面的代码是： 欢迎进入新《网页设计师》:web标准教程及推广 页面左列 页面中列 页面右列 这时候页面的效果仅仅可以看到三个并列的灰色矩形，和一个背景图。但是我希望高度是满屏的，怎么办呢？ 4.100%自适应高度? 为了保持三列有同样的高度，我尝试在#left、#middle和#right中设置”height:100%;”，但发现完全没有预想的自适应高度效果。经过一番尝试后，我只好给每个div一个绝对高度:”height:1000px;”，并且随着内容的增加，需要不断修正这个值。难道没有办法自适应高度了吗？随着阿捷自己学习的深入，发现一个变通的解决办法，实际上根本不需要设置100%，我们已经被table思维禁锢太深了，这个办法在下一节的学习中详细介绍。 ❓ 延伸问答与排错指南（FAQ）CSS 三列固定宽度布局怎么写？本文的做法是把左列设为普通流，宽度 200px；中列和右列用 position:absolute 绝对定位，分别 left:200px 和 left:500px，再配合各自宽度 300px、280px。这样能快速搭出固定宽度三栏页面。为什么给 div 设置 height:100% 没效果？因为父级高度没有被明确建立时，子元素的 100% 高度往往无法按预期计算。文章里作者尝试后发现三列并不会自动拉满屏幕，只能先用固定高度顶住，说明单纯写 100% 并不能解决所有布局问题。这篇文章对新手学 CSS 有什么价值？它展示了早期 CSS 布局从基础样式到三列排版的完整思路，也暴露了新手常见误区：把网页当成表格来想。适合用来理解定位、宽度和高度之间的关系，先把页面搭出来，再继续优化自适应。📚 【招数学习】专栏延伸阅读与热门精选（全站文章归档）：CSS布局入门技术XHTML代码规范一些有用的资料如何制作不用表格的菜单热门必读俩月了, DMIT 终于补货了!热门必读跨境电商 AI Prompts

## Comments

### By: 死鱼

- Link: https://yjyj.net/learn/3901.html/comment-page-1#comment-12478
- Published: 2006-05-07T12:45:58+08:00

站长资讯里面有一篇相关的介绍你可以看一下的
 链接:[http://www.chinahtml.com/webdesign/5/2006/css-css-11396357553485.shtml](http://www.chinahtml.com/webdesign/5/2006/css-css-11396357553485.shtml)

### By: 鱼乐

- Link: https://yjyj.net/learn/3901.html/comment-page-1#comment-12477
- Published: 2006-05-07T11:56:27+08:00

4.100%自适应高度?
 为了保持三列有同样的高度，我尝试在#left、#middle和#right中设置”
height:100%;”，但发现完全没有预想的自适应高度效果。经过一番尝试后，我只好给每个div
一个绝对高度:”height:1000px;”，并且随着内容的增加，需要不断修正这个值。难道没有办法
自适应高度了吗？随着阿捷自己学习的深入，发现一个变通的解决办法，实际上根本不需要
设置100%，我们已经被table思维禁锢太深了，这个办法在下一节的学习中详细介绍。 关于
这个问题，相关的文章有链接嘛？能否告知下？