关于CSS三列Float布局任务

本文介绍如何使用HTML与CSS实现响应式三栏布局,包括左右固定宽度栏与中间自适应栏的设计技巧。文中探讨了position与float属性的应用及注意事项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

任务目标
  • 掌握HTML/CSS布局的概念
  • 掌握盒模型的概念
  • 掌握position与float的概念以及在布局时的用法

任务描述

  • 使用 HTML 与 CSS 按照示意图;实现三栏式布局。
  • 左右两栏宽度固定,中间一栏根据父元素宽度填充满,最外面的框应理解为浏览器。背景色为 #eee 区域的高度取决于三个子元素中最高的高度。

任务注意事项

  • 尝试 position 和 float 的效果,思考它们的异同和应用场景。
  • 改变中间一栏的内容长度,以确保在中间一栏较高和右边一栏较高时,父元素的高度始终为子元素中最高的高度。        

个人心得体会:        、

  1. 当子DIV中含有绝对属性时,因为脱离了文档流,无法做到父元素高度随子元素最大高度变化而变化;
  2. DIV_LEFT设置左浮动,DIV_RIGHT设置右浮动,再设置CENTER段落,会自动填充到中间列;      
  3. 关于父DIV随子DIV中的最大高度变化,给父元素属性中添加 overflow:hidden;属性
                            
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

a972043362

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值