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

css实践中遇到的问题_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 11:21:24
原创
1186人浏览过

webkit浏览器中缩放低于100%浮动布局错乱?

如:1200宽度:内容宽度(400-20-2)*3个+内边距宽度0+边框宽度1px*2边+外边距宽度10px*2边

<div class="div1">	<div class="div2">		<li class="li"></li>		<li class="li"></li>		<li class="li3"></li>	</div></div>
登录后复制

 

.div2 {    width: 1200px;    border: 1px solid #ddd;}.li {    float: left;    width: 378px;    height: 40px;    line-height: 40px;    margin: 10px;    border: 1px solid #ddd;}.li3 {    float: right;    width: 31%;    height: 40px;    line-height: 40px;    margin: 10px;    border: 1px solid #ddd;}
登录后复制

 

 问题所在:在-webket内核中出现的情况,在ie中并没有这种情况,由于边框的宽度在缩放中都是1px,低于100%进行缩小的时候第三个float会被挤到下一层

Kotlin Android 中文开发帮助文档 PDF版
Kotlin Android 中文开发帮助文档 PDF版

这本书并不是一本语言参考书，但它是一个Android开发者去学习Kotlin并且使用在自己项目中的一个工具。我会通过使用一些语言特性和有趣的工具和库来解决很多我们在日常生活当中都会遇到的典型问题。 这本书是非常具有实践性的，所以我建议你在电脑面前跟着我的例子和代码实践。无论何时你都可以在有一些想法的时候深入到实践中去。 这本书适合你吗？ 写这本书是为了帮助那些有兴趣 使用Kotlin语言来进行开发的Android开发者。 如果你符合下面这些情况，那这本书是适合你的： 你有相关Android开发和Andro

Kotlin Android 中文开发帮助文档 PDF版 11
查看详情 Kotlin Android 中文开发帮助文档 PDF版

解决办法:如以上代码,给第三个框设置百分比,百分比可以这样取值378/1200=31.5% 经测试取值31%才可以!

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

大家都在看：

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

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

下载
来源：php中文网
收藏 点赞
上一篇：HTML与CSS布局技巧总结_html/css_WEB-ITnose 下一篇：white-space:nowrap 的妙用_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
解决React中Bootstrap切换开关显示为普通复选框的问题 在使用React和Bootstrap时，如果form-switch组件显示为普通复选框而非切换开关，通常是由于Bootstrap版本过旧。本文将指导您如何通过更新BootstrapCDN链接或npm包来解决此问题，确保正确渲染切换开关，并提供相关代码示例和注意事项。
2025-12-03 10:09:18
965
CSS实现智能浮动标签输入框：聚焦与填充状态下的顶部常驻效果 本教程详细介绍了如何使用CSS创建智能浮动标签输入框。通过结合:focus和:not(:placeholder-shown)伪类，以及::placeholder伪元素，实现当输入框聚焦或内容填充后，标签（label）能平滑地从输入框内部移动到顶部并保持在该位置，从而提升用户体验和界面美观度。
2025-12-03 10:07:12
695
深入理解Web开发中本地文件与HTTP服务器环境的差异 本文旨在阐述在Web开发中，直接通过文件系统打开HTML文件（file://协议）与通过本地HTTP服务器（如LiveServer）访问（http://协议）之间的核心差异，重点分析跨域资源共享（CORS）机制在本地环境下的行为，以及它如何影响如标签的contentDocument属性。文章将通过具体案例，指导开发者如何避免因协议差异导致的常见问题，并推荐在开发过程中始终使用本地服务器的最佳实践。
2025-12-03 10:05:30
483
在记事本上写的html怎么运行_记事本写html运行操作【教程】 首先将记事本中的HTML代码保存为.html格式文件，再通过浏览器打开即可查看网页效果。具体步骤：1、编写代码后点击“文件”→“另存为”，选择“所有文件”，输入文件名如myweb.html；2、保存至指定位置如桌面；3、双击该文件或右键用浏览器打开；4、修改代码时重新保存并在浏览器中按F5刷新即可实时查看更新内容。
2025-12-03 09:54:07
791
为前端CDN资源加载实现超时控制 本文旨在解决前端页面通过CDN加载样式资源时，因网络环境（如代理）问题导致加载缓慢或失败的痛点。针对HTML标签缺乏原生超时机制的现状，文章提出并详细阐述了一种基于JavaScript的动态加载方案。该方案利用fetchAPI结合AbortController和setTimeout实现资源加载的超时控制，并在超时后中止请求，避免页面长时间阻塞，从而提升用户体验。
2025-12-03 09:48:17
875
idea的html怎么运行不了_解idea中html无法运行问题【技巧】 首先确认HTML文件被正确识别并关联，再配置内置或外部浏览器以便预览；接着通过右键菜单“OpeninBrowser”直接运行文件；同时检查资源路径是否正确避免加载失败；最后必要时启用IDEA内置HTTP服务器支持AJAX等需http协议的功能。
2025-12-03 09:45:53
569
CSS媒体查询故障排查：max-width语法与响应式设计实践 本文旨在解决CSS媒体查询不生效的常见问题，特别是由于max-width属性拼写错误导致的布局失效。我们将深入探讨媒体查询在响应式设计中的核心作用，详细解析max-width的正确语法与使用方式，并通过具体代码示例展示如何构建适应不同屏幕尺寸的灵活布局，同时提供必要的调试技巧，确保您的响应式设计能够按预期工作。
2025-12-03 09:44:02
773
从OpenAI API响应中高效提取文本内容 本文详细指导如何从OpenAIGPT系列模型的APIJSON响应中准确提取所需的文本内容。我们将重点介绍如何利用JSON解析器处理API返回的结构化数据，避免直接字符串操作的常见错误，并通过具体代码示例演示如何访问choices数组中的生成文本，并探讨处理多条生成结果的方法，确保开发者能高效、稳健地获取AI模型输出。
2025-12-03 09:34:02
707
在HTML文档中正确引入外部CSS样式表：一份实践指南 本教程旨在指导开发者如何在HTML文档中正确引入外部CSS样式表。文章将详细阐述外部CSS的优势、文件准备与保存规范，并重点讲解通过标签设置正确的CSS文件路径，同时提供常见问题排查方法，帮助用户解决样式不生效的问题，提升项目可维护性与开发效率。
2025-12-03 09:32:03
696
React JS入门：Babel配置与渲染问题的深度解析 本文旨在解决初学者在使用ReactJS时，将JavaScript文件链接到HTML并进行渲染时遇到的常见问题。核心内容包括正确配置type="text/babel"以启用浏览器内JSX转换，以及理解ReactDOM.render与ReactDOM.createRoot在不同React版本间的兼容性差异。文章还将提供完整的代码示例和重要注意事项，帮助开发者顺利搭建基础React开发环境。
2025-12-03 09:20:02
210
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

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

  • PHP学习

  • 技术支持

  • 返回顶部