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

maigin-left为负数的问题！_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 12:04:36
原创
1442人浏览过

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title>	<style type="text/css">/*并列浮动布局,该类型为固定宽度布局。*/    	body{			margin:0px;			padding-left:180px;			padding-right:240px;			min-width:480px; /*定义浏览器为最小窗口宽度，该值为第2列 第3列宽度和。*/		}		div{			border:1px solid gray;			height:40px;		}		#left{			width:180px;			float:left;			margin-left:-180px;/*设置偏移宽度为左列宽度，注意取值为负数。*/		}		#middle{			width:240px;			float:left;		}		#right{			width:240px;			float:left;			margin-right:-100%;		}    </style></head><body>	<div id="left">左列</div>    <div id="middle">中列</div>    <div id="right">右列</div></body></html>
登录后复制

#left定义：此处为什么要设置偏移宽度为负数呢？默认DIV不是从左边开始的么？

AI建筑知识问答
AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

AI建筑知识问答 22
查看详情 AI建筑知识问答

回复讨论(解决方案)

body 中的padding-left=180px,不写的-180px的话，那浏览器不是就看不到从左边开始的吗

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：django + nginx + raspberypi + pidaro_html/css_WEB-ITnose 下一篇：这样的效果怎么写样式_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
深入理解CSS浮动清除：clear: both的应用与实践 本文深入探讨了CSS浮动布局中clear属性的正确使用，特别是在同时应用float:left和float:right后如何清除浮动。文章详细解释了clear:left、clear:right和clear:both的区别与适用场景，强调了clear:both作为最通用且稳健的清除浮动方案，以确保后续元素正确布局，避免因浮动导致的布局混乱。
2025-11-10 09:51:23
702
响应式图片焦点控制：利用CSS媒体查询优化移动端视觉体验 在移动设备上，图片经常因缩放而导致焦点偏离，影响用户体验。本文将详细介绍如何利用CSS的object-fit和object-position属性，结合媒体查询（MediaQueries），精确控制图片在不同屏幕尺寸下的显示区域和焦点位置，从而无需为移动端准备单独图片，实现图片内容的智能适配和优化。
2025-11-10 09:39:12
564
React Native中SVG Path元素正确缩放以适应ViewBox的教程 本文深入探讨了在ReactNative中使用react-native-svg时，如何确保SVG内部的path元素能够正确缩放以适应其viewBox。核心在于理解viewBox应定义SVG内容的固有坐标系统，通常为固定值，而非动态随组件宽高变化。通过固定viewBox并结合width、height属性，可以实现SVG内容的预期缩放行为。
2025-11-10 09:38:34
550
Discord用户头像链接的动态获取与持久性挑战 本文探讨了Discord用户头像链接的持久性问题。由于Discord为上传图片生成随机URL，直接获取一个“始终更新且链接不变”的用户头像链接是不可行的。唯一可靠的方法是通过DiscordAPI动态获取用户的最新头像URL，并利用其用户ID作为稳定标识符。
2025-11-10 09:38:21
766
在HTA中利用VBScript动态控制图片位置的教程 本文详细介绍了如何在HTML应用程序（HTA）中，通过VBScript脚本语言动态地控制页面上图片的位置。我们将探讨如何利用VBScript访问HTML元素的DOM属性，结合用户输入实时更新图片的top和left样式，从而实现无需按钮即可响应式调整图片位置的功能。教程将提供完整的代码示例和详细解释，帮助开发者理解HTA环境下VBScript与HTML交互的关键机制。
2025-11-10 09:35:11
320
Spring Boot项目中CSS背景图片路径的正确设置与常见问题解析 本文旨在解决SpringBoot应用中CSS背景图片无法正确加载的问题。当内联样式或background-color生效，而background-image失效时，核心原因通常是CSS文件中图片相对路径的引用不当。文章将详细阐述如何根据项目文件结构正确设置CSS中的图片路径，并提供示例代码和调试建议，确保背景图片能顺利显示。
2025-11-10 09:24:32
659
使用CSS动画为HTML元素创建震动效果教程 本教程详细讲解如何利用CSS的@keyframes规则和animation属性，为HTML元素实现逼真的震动视觉效果。文章将涵盖动画定义、属性配置、以及通过JavaScript动态触发动画的方法，并提供完整的示例代码和注意事项，帮助开发者轻松为网页增添交互性。
2025-11-10 09:24:18
170
解决Flexbox中文本溢出省略号导致元素位移的策略 本文旨在解决Flexbox布局中，当子元素设置flex:110并结合overflow:hidden和text-overflow:ellipsis实现文本溢出省略时，相邻元素可能出现意外位移的问题。我们将深入探讨此现象的根源，并提供通过添加width:0或min-width:0来有效防止这种位移的解决方案，确保布局的稳定性和预期行为。
2025-11-10 09:21:17
657
JavaScript函数如何优雅地接收并处理不同对象参数 本文深入探讨了在JavaScript中，如何利用对象解构赋值的特性，使同一个函数能够灵活地接收并处理结构相似但来源不同的对象参数。通过示例代码，我们展示了这种方法如何提升代码的复用性、可读性和维护性，避免了在函数内部进行繁琐的属性名修改，从而构建出更健壮、更具适应性的函数。
2025-11-10 09:16:01
129
Flask应用中HTML文本渲染的最佳实践与常见问题解决 在FlaskWeb应用中，直接将文本内容放置于HTML标签内可能导致显示异常或不符合最佳实践。本教程将深入探讨这一常见问题，解释为何应避免此做法，并提供使用或等语义化标签包装文本的标准解决方案，确保内容在浏览器中正确、可靠地呈现，同时提升代码的可维护性和兼容性。
2025-11-10 08:49:01
364
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

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

  • PHP学习

  • 技术支持

  • 返回顶部