微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

div+csS中的一些技巧和浏览器兼容的办法_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 12:28:14
原创
1282人浏览过

（1）对于一个层内有浮动的层，主层应该用overflower：hidden，以消除内层的浮动导致的其它外的影响。

比如:

                  <p class="sycode">                 <     div id     =     "     main1     "     >           <     div id     =     "     son1     "      style     =     "     float：left; display:inline     "     >     aa     </     div     >          </     div     >          <     div id     =     "     main2     "      style     =     "     margin-top:10px;     "     >      main2内容　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　     </     div     >                  </p>
登录后复制

这时候如果MIAN1不加OVERFLOWER：HIDDEN的话，MAIN2的MARGIN-TOP是没有效果的，原因就是SON1这个浮动元素的影响导致的。

display:inline是为了兼容IE6的浮动中MARGIN会产生双倍的MARGIN值。当然还有别的办法可以消除FLOAT的影响，就是在浮动元素后面添加一个DIV让他CLEAR：LEFT，RIGHT，BOTH

智谱AI开放平台
智谱AI开放平台

智谱AI大模型开放平台-新一代国产自主通用AI开放平台

智谱AI开放平台 85
查看详情 智谱AI开放平台

（2）对于浮动的LI，要排成多行多列的话，LI要指写高度和宽度。指定高度是因为如果没有指定高度，前面一排的LI如果文字行数不一的话，第二排的LI就会下沉。

立即学习“前端免费学习笔记（深入）”；

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：这两天公司的事情不多，玩了玩ＤＩＶ＋ＣＳＳ，切个社区的图，扒的一个韩国模版_html/css_WEB-ITnose 下一篇：CSS技巧！像table一样布局div_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
HTML文本域怎么添加_HTMLtextarea文本域的创建与属性设置 使用标签创建多行文本输入框，可设置name、rows、cols、placeholder、disabled、readonly、required和maxlength等属性；2.常与form结合使用，实现表单提交时的数据验证与传输，提升用户体验。
2025-11-25 13:58:46
479
Bootstrap断点识别：实时检测浏览器屏幕尺寸的实用指南 本教程旨在深入探讨Bootstrap的响应式断点系统，并提供一个实用的在线工具，帮助开发者和设计师实时识别当前浏览器窗口所处的Bootstrap断点级别。通过理解并利用这些断点，您可以更有效地构建适应不同设备尺寸的响应式网页布局，优化用户体验。
2025-11-25 13:42:01
626
如何在JavaScript中实现点击元素时切换类名并自动移除其他同级元素的类名 本教程详细介绍了如何在前端开发中实现一个常见的交互模式：当点击某个元素时，为其添加一个特定的CSS类，并同时确保其他同级元素移除该类。文章深入解析了HTMLCollection与Array之间的差异，并演示了如何利用Array.from()和filter()方法高效地管理元素类名，以实现排他性选择效果，并提供完整的HTML、CSS和JavaScript代码示例。
2025-11-25 13:35:18
189
CSS垂直线创建指南：解决常见选择器与属性错误 本教程旨在解决使用CSS创建垂直线时常见的选择器不匹配和属性语法错误。我们将详细讲解ID选择器与类选择器的正确使用方法，纠正CSS属性值中的常见笔误，并提供完整的代码示例，帮助开发者高效、准确地在网页中实现垂直分隔线效果，确保样式能够正确应用。
2025-11-25 13:32:15
456
解决Angular循环中租金计算错误：确保每次迭代更新状态与正确数组操作 本文旨在解决Angular应用中常见的循环计算问题，特别是当for循环在租金计算器等场景中仅重复输出第一年数据时。核心问题在于循环内部未正确更新计算基数，导致每次迭代都使用初始值，并且数组填充方式不当。教程将详细指导如何修正计算逻辑、使用push方法动态填充数组，并提供变量命名与初始化等最佳实践，确保计算结果随年份正确递增。
2025-11-25 13:30:02
659
优化HTML表格行淡入淡出动画，避免布局抖动 本文旨在解决HTML表格行在连续淡入淡出动画过程中可能出现的布局抖动问题。通过分析同步动画的潜在影响，我们将介绍一种基于jQuery的改进方法，即通过引入适当的延迟，确保淡出动画完成后再执行淡入动画，从而实现更稳定、流畅的表格行切换效果，提升用户体验。
2025-11-25 13:29:02
586
JavaScript中HTML标签转义：如何选择性保留特定标签 本文旨在探讨在JavaScript中如何将HTML标签转换为实体字符（如将
2025-11-25 13:25:21
342
动态DOM操作：点击祖父元素时移除特定类与子孙节点 本教程详细讲解如何使用JavaScript处理DOM事件，实现在点击特定祖父元素（标签）时，不仅移除其自身的CSS类，还能同时查找并删除具有特定类的子孙元素。通过事件监听器和DOM查询方法，实现页面元素的动态交互和管理，提升用户体验和页面功能性。
2025-11-25 13:25:00
787
使用Mutt发送包含嵌入式图片的HTML邮件指南 本教程详细介绍了如何使用mutt发送包含嵌入式图片的HTML邮件。针对常见的问题，如图片显示为附件或破损，我们分析了cid:和本地路径引用的局限性。核心解决方案是利用外部URL来引用图片，这能显著提高兼容性并避免邮件服务提供商的限制。文章提供了具体的操作步骤、代码示例，并探讨了这种方法的优缺点及注意事项，旨在帮助用户实现可靠的图片嵌入效果。
2025-11-25 13:23:37
477
JavaScript实现带倒计时和持久化的按钮禁用与自动启用功能 本文详细介绍了如何使用JavaScript和WebStorageAPI（localStorage）实现一个功能，该功能允许按钮在点击后禁用指定时长，并在页面刷新后仍能保持禁用状态，待设定的时间结束后自动重新启用。教程将涵盖核心概念、实现步骤、示例代码及注意事项，帮助开发者构建具备时间限制和状态持久化能力的交互式按钮。
2025-11-25 13:22:01
707
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部