像搭积木一样制作双栏布局

当我们浏览购物网站或新闻平台时，经常会看到页面分成左右两部分——左边是商品分类导航，右边展示具体内容。这种排版方式就像在纸上画分栏线，只需要掌握几个简单技巧，零基础的朋友也能学会。

准备你的积木

想象每个都是由透明的盒子（div）堆叠而成。我们先准备两个盒子：

这里是导航菜单

这里是主要内容区域

排列盒子的神奇咒语

接下来我们让两个盒子并排站立：

left-box {
width: 25%;        / 左盒子占1/4宽度 /
float: left;       / 漂浮到左侧 /
background: f0f0f0; / 浅灰色背景 /
padding: 20px;     / 内边距让文字不贴边 /
right-box {
width: 75%;       / 右盒子占3/4宽度 /
float: left;      / 同样向左漂浮 /

新手常见问题指南

• 盒子叠在一起怎么办？——检查总宽度是否超过100%，25%+75%刚好填满
• 背景颜色不一样高？——给父级容器添加背景色，统一视觉效果
• 手机显示错位？——在盒子样式中添加"box-sizing: border-box"防止撑破布局

动手制作你的第一份双栏页面

1. 复制提供的代码到记事本，保存为.html文件
2. 用浏览器打开查看效果
3. 尝试修改百分比数值（比如改成30%+70%）
4. 更换自己喜欢的背景颜色
5. 添加文字内容观察版面变化

就像小时候玩拼图一样，布局也可以通过不断调整获得理想效果。记住这三个要点：设定宽度、开启漂浮、控制间距。遇到问题时，返回检查这三个要素，很快就能成为排版小能手！