为什么负边距会影响我的页面宽度?

2024-04-27

请参考以下内容example http://jsfiddle.net/wdm954/Fcznp/9/:

其中,200px 宽的外部 div 旨在确定我们的页面宽度。它包含一个 400px 宽的内部 div,但左/右负边距为 -100px。

我预期的最终结果是浏览器将总内容宽度注册为 200 像素,而不是 400 像素,但一旦窗口大小调整为小于 400 像素,就会显示水平滚动条。这里发生了什么?


负边距不会调整宽度div。负左边距将移动div位于页面流中位置的左侧,负的右边距将允许其他元素与页面的右侧重叠div按保证金金额。

希望你能明白我的意思这个jsFiddle http://jsfiddle.net/vEk8p/.

从你的问题看来你需要overflow: hidden容纳一个大的div在一个较小的范围内而不溢出其边界。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么负边距会影响我的页面宽度? 的相关文章

  • 是否可以从外部样式表而不是计算值获取 dom 元素的特定 css 属性的值? [复制]

    这个问题在这里已经有答案了 jquery css 方法对此不起作用 是否有另一种方法可以获取 css 表中的实际值 例如百分比等 这是一个示例 表明 css 不适用于此 外部CSS margin left 10 Js Code var Ma
  • Javascript:自动点击按钮?

    我正在学习如何编写 chrome 扩展 而且我对 javascript 还很陌生 这是一些 html div class button data a class button1 whiteColor href http link1 com
  • 谷歌浏览器自动填充所有密码输入

    我的问题 我必须打开谷歌来自动填充我网站上的登录信息 但是现在每当我想编辑我的帐户信息或编辑其他用户帐户信息 作为管理员 时 它都会尝试自动填充该登录数据 它在奇怪的地方填充了我的数据 问题似乎是 Chrome 会自动用某种密码填充任何输入
  • 在 Angular 中,如何动态地将某些单词包装在另一个 html 元素中?

    我有这个简单的角度组件 Component selector my component template p someString p export class MyComponent Input someString string som
  • 提交和 onclick 不能一起工作

  • 如何将
  • 元素保持在固定宽度
  • 我有一个标题div和一个菜单ul在它下面 我想完成两件事 1 the ul应该具有相同的宽度div 外部垂直边框与 x 位置完全相同 2 我想保持间距li元素大致相等 经过一些尝试和错误li的边距和填充我大致实现了 Google Chrom
  • 如何在 ReactJS 中将具有属性的 CSS 转换为 MaterialUI 样式

    我有以下 CSS contentEditable true empty not focus before content attr data text 它允许在内容可编辑的 div 中没有内容时显示占位符 我正在使用 Material UI
  • 具有自定义尺寸的线性渐变

    我有这样的设计 它已经用 html css 创建 但我需要删除 1 和 5 的额外线条 这是通过添加绝对位置元素来创建灰线来实现的 但容器点的大小是响应式的 我的想法是为每个容器创建一个背景线性渐变 如下所示 for all backgro
  • 具有透明度的颜色输入

    是否可以使用内置选择透明颜色
  • 单击菜单外部以关闭菜单时,Bootstrap 导航栏“闪烁”

    我遇到了导航栏问题 当您单击菜单外部以关闭菜单时 导航栏会出现 闪烁 如果在单击菜单外时按住鼠标 则闪烁会持续存在 如下所示 我认为这可能与角度有关 而不是与CSS有关 主要是因为其他人未能在小提琴上复制它 上一个问题在这里 https s
  • jquery/javascript 处理后移至命名锚点

    在进行一些 jquery 处理后 如何将焦点移动到同一页面上的不同部分 名为锚点 函数 ABC 进行一些处理 然后 我需要将用户移动到同一页面上的某个部分 页面下方 您可以使用下面的代码将屏幕滚动到 div 只需更改选择器以匹配您要滚动到的
  • HTML5 拖放 - 没有透明度?

    当我将一个元素拖放到页面上时 该元素会变成 幻影 基本上它获得了一些透明度值 有什么办法可以做到吗opacity 1 看来是做不到了 拖动的元素被放入具有自己的不透明度 低于 1 的容器中 这意味着虽然您可以降低拖动元素的不透明度 但您无法
  • R Shiny - 修复了 Shiny 仪表板中的侧边栏和主标题

    我有一个简化的闪亮仪表板 请参阅下面的代码 我想修复侧边栏和主标题 因此 在其他帖子的帮助下 我编写了一个 CSS 文件来解决该问题 sidebar color FFF position fixed width 220px white sp
  • Typeahead.js 干扰 Bootstrap 输入组

    如何防止 Typeahead js 拆分我的 Twitter Bootstrap 3 输入组 每当我将 Typeahead javascript 指向属于输入组一部分的文本区域时 连接的文本区域和提交按钮就会停止连接 这只是 Typeahe
  • 底部带有三角形的蒙版图像

    我正在尝试找出如何最好地掩盖具有像这样的角度形状的 div 如果在这种情况下顶部 div 将是背景图像 并且两个 div 都是 100 宽度 我看过很多关于如何用圆形遮罩图像的教程 但没有关于如何遮罩红色区域等 div 边框的教程 我知道一
  • 使用后代选择器的响应式网站

    我试图使用媒体查询使我的网站响应 但是当我在代码的某些部分使用后代选择器时 页面没有响应 当我使用此代码时 该页面是响应式的 div1 float left width 20 height 200px background color re
  • 去除iOS输入阴影

    在 iOS Safari 5 上 我必须遵循输入元素 顶部内部阴影 我想删除顶部阴影 错误 webkit appearance不保存 目前的风格是 input border radius 15px border 1px dashed BBB
  • Safari 的 Javascript 与 document.write 的问题

    我的问题只发生在 Safari 上 IE FF Chrome 和 Opera 都可以完美运行 我正在向 DOM 添加一个对象 与 YouTube 的方式完全相同 具体取决于 ActiveX 或 NPAPI 因此在确定写入对象类型后 我通过以
  • 如何将 default.html 的字符编码设置为 UTF-8?

    我花了几个小时来验证我的网站HTML 4 01 严格事实上我已经成功了 但仍然有一个警告我无法摆脱 警告是 字符编码不匹配 中指定的字符编码 HTTP 标头 iso 8859 1 是 与中的值不同 元素 utf 8 我将使用该值 来自 HT
  • addEventListener keydown 不起作用

    我在互联网上找到了一些基本的 Pong 代码 并尝试添加按键 代码在这里 http cssdeck com labs ping pong game tutorial with html5 canvas and sounds http css

随机推荐

  • 使用 tkinter + pyhook 时冻结。两个事件循环和多线程

    我正在用 python 2 7 编写一个工具 记录用户按下键盘或鼠标按钮的次数 点击次数将显示在屏幕左上角的一个小黑框中 即使另一个应用程序处于活动状态 该程序也会记录点击 除非我将鼠标移到框上 否则它工作正常 然后鼠标冻结几秒钟 然后程序
  • 我们如何使用 StringBuilder 在字符串前面添加字符串?

    我知道我们可以使用附加字符串StringBuilder 有没有一种方法可以使用前置字符串 即在字符串前面添加字符串 StringBuilder这样我们就可以保持性能优势StringBuilder offers 使用位置参数设置为 0 的 i
  • 将 Base64 字符串转换为 JPG

    我正在得到图像为 base64 字符串 dataurl 下面是我的函数 它将dataurl进入图像 现在 如果图像是 png 则 png 库将创建图像 而 jpg 库将引发错误 反之亦然 问题是当我上传 png 时效果很好 但是当我上传 j
  • 从 LINQ to SQL 升级到 EF 4.1 时,如何最大限度地减少性能损失?

    我最近将一个使用 LINQ to SQL 和 SQL Server CE 3 5 的应用程序更新为 Entity Framework 4 1 Code First 和 SQL Server CE 4 0 现在它的运行速度明显变慢 我在之前和
  • 如何在 spring 中将模型作为重定向属性传递

    redirectModel addAttribute Model model return REDIRECT PREFIX my company organization management manage users 当我通过这个时 我得
  • 带权重的欧几里得距离

    我目前正在使用SciPy计算欧氏距离 dis scipy spatial distance euclidean A B 在哪里 A B是5维位向量 现在工作正常 但是如果我为每个维度添加权重 是否仍然可以使用 scipy 我现在拥有的 sq
  • Django i18n 和 python 语言环境(和日期)

    我一直在使用 Django 的 i18n 系统 它似乎大部分工作正常 然而 模型代码中的日期似乎引起了问题 我使用 datetime strftime 填充一些 CHOICES 元组 然后在表单中使用它们 据我了解 django 会将语言环
  • 如何在navigationStart路由器事件中暂停路线更改

    在我的应用程序中 我有从包 节点模块 公开的路由 因此 我无法将 canActivate 或 canDeactivate 用于节点模块内定义的路由 因此 我开始订阅应用程序组件中的所有路线更改 并根据条件将用户重定向到不同的路线 由于条件有
  • PEX协议(磁力链接)如何找到它的第一个IP?

    我试图了解磁力链接如何工作 因为我读过他们使用 DHT 和 PEX 来获取对等点 但如果我是网络中的新节点 如何才能找到仅具有哈希值的对等点文件 它不是总是需要一个到已知主机的链接吗 Thanks Bittorrent DHT 可以通过多种
  • 如何阻止 Apache CXF 发送响应消息?

    如果给定的 SOAP 标头元素具有给定值 例如 如果标头标记 response 的值为 0 我根本不希望 Apache CXF 返回响应 我怎样才能做到这一点 CXF 似乎假设所有呼叫都会收到响应 我知道这在 Web 服务上下文中看起来很奇
  • 如何在生产环境中运行 spring boot 可执行 jar?

    Spring Boot 的首选部署方法是通过内部包含 tomcat 的可执行 jar 文件 它是从一个简单的开始java jar myapp jar 现在 我想将该 jar 部署到 EC2 上的 Linux 服务器上 我是否遗漏了某些内容
  • 如何在 Bullet 物理引擎中对物体应用旋转?

    我有旋转值 滚动 俯仰 偏航 我想将这种旋转应用于身体 但我不知道该怎么做 最直接的方法是通过运动状态或直接设置来直接设置刚体的世界变换 要获得横滚 俯仰和偏航的变换 您可以使用 btRigidBody rigidBody btTransf
  • 检查变量是否为 double 数据类型

    我需要检查我拥有的变量是否属于该数据类型double 这是我尝试过的 try double price Convert ToDouble txtPrice Text catch FormatException MessageBox Show
  • cs0030:无法生成临时类

    我有一个 Web 服务 当我尝试生成它的对象时 出现以下错误 无法生成临时类 结果 1 错误 CS0030 无法将类型 ShortSell ShortSellRQOriginDestinationInformationFlightSegme
  • 消息通知产生“此内容无法显示”

    我正在通过网络挂钩向 Slack 发送消息 使用单个 文本 JSON 元素的消息通知可通过适用于 OS X 和 iOS 的 Slack 应用程序生成正确的通知文本 频道中的消息文本也是正确的 但是 当使用新的 阻止 方法时 通知文本变为 无
  • 发布时错误元数据文件dll无法找到CSC

    我有一个 Visual Studio 解决方案 其中包含多个项目 特别是 DotNet5 asp net 应用程序 其中有多个 netstandard 2 0 引用 它在调试器中构建并运行良好 但不断抛出元数据错误 它不断特别引用在 net
  • 谷歌分析 SDK iOS10

    我已经从 cocoa pod 版本 3 14 安装了 Google Analytics id
  • 如何在Spring boot中使用注释来使用参数解析器?

    我想用argument resolvers在 Spring 启动中 我该怎么办 它是在 XML 中完成的 如下所示
  • 快速移动的球与鼠标控制的球拍的碰撞检测问题

    在统一中 我有一个应该击球的球拍 并且球拍直接由鼠标控制 即鼠标使用鼠标轴移动球棒并使用 translate 函数移动球拍 我预计 Unity3d 的物理特性不会直接通过鼠标正确地转换球拍的运动并相应地影响球 我必须编写一些自定义的内容 结
  • 为什么负边距会影响我的页面宽度?

    请参考以下内容example http jsfiddle net wdm954 Fcznp 9 其中 200px 宽的外部 div 旨在确定我们的页面宽度 它包含一个 400px 宽的内部 div 但左 右负边距为 100px 我预期的最终