程序员经验分享-hwhale

将元素从容器中分离出来

2024-01-17

我将所有内容包装在具有固定宽度的容器元素中。

但我有一个<div>我想“突破”该容器以跨越页面的整个宽度。

http://dabblet.com/gist/3207168 http://dabblet.com/gist/3207168

正如您在该示例中看到的，我已经得到了<div>打破，但由于它是绝对定位的，它不会影响页面的流程......这就是我想要它做的。

我希望它的行为就像在页面流中一样，但扩展窗口的整个宽度。


另一个想法，在现代浏览器中确实扩展了.breakout仅适用于浏览器窗口的宽度：

body, html {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

div {
  padding:0.5em;
}

.container {
  width:300px;
  background-color:rgba(255,255,0,0.5);
  margin:auto;
}

.breakout {
  margin:1em -100%; /* old browsers fallback */
  margin:1em calc(50% - 50vw);
  background-color:rgba(255,0,255,0.5)
}
<div class="container">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  <div class="breakout">
    Break out of container
  </div>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>

Edit:克里斯·科伊尔 (Chris Coyier) 唯一解释过有限宽度父级中的全宽容器 https://css-tricks.com/full-width-containers-limited-width-parents/，这有点相似。

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

html

css

position

将元素从容器中分离出来 的相关文章

  • 如何使用XPath选择非空段落？

    我想要抓取的网页具有类似的结构 每个都有一个段落是一个问题 一个段落是一个答案 我想抓取每个问题和答案并将它们存储在两个项目中 问题是 在某些页面上 问题和答案分别是 xxx p 1 and xxx p 2 但在其他页面上 xxx p 1

  • 是否可以设置输入文本值的样式？

    我想知道是否可以设置输入框值的样式 such http jsfiddle net aCwhY as

  • 将 HTML 'label' 标签与单选按钮一起使用

    是否label标签与单选按钮一起使用吗 如果是这样 你如何使用它 我有一个显示如下的表单 First Name text field Hair Color color drop down Description text area Salu

  • 从字体到跨度（大小和颜色）和背面的正则表达式（VB.NET）

    我正在寻找一个正则表达式 可以将我的字体标签 仅具有大小和颜色属性 转换为具有相关内联CSS的span标签 如果有帮助的话 这将在 VB NET 中完成 我还需要一个正则表达式来实现相反的效果 下面详细说明的是我正在寻找的转换示例 font

  • Bootstrap Affix Nav 导致下面的 Div 向上跳转

    我使用 Bootstrap 的 Affix 函数创建了一个 JSFiddle 以便在向下滚动并且标题移出视图时使导航保持在屏幕顶部 我遇到的问题是 当使用纯 HTML 时 导航下方的文本会过早地跳起来并隐藏在导航后面 查看有问题的代码her

  • 类方法作为 JavaScript 中的事件处理程序？

    JavaScript 中是否有最佳实践或通用方法将类成员作为事件处理程序 考虑以下简单示例

  • 如果一个设置多个html标签的id属性值相同，会发生什么？

    我最近看到一个html页面 我认为几个html标签的id是相同的 然后我意识到id是唯一的 但这提出了一个问题 如果页面实际上使用了多个标签 会发生什么 正如我听说每个 html 标签 如果有的话 的 id 属性必须是唯一的 现在我想知道如

  • CSS3变换：悬停时翻译，带有过渡[重复]

    这个问题在这里已经有答案了 这应该很简单 我的 HTML 中有一堆锚点 如下所示 a href Link 1 a a href Link 2 a a href Link 3 a a href Link 4 a a href Link 5 a

  • 如何在没有 JavaScript 的情况下预加载图像？

    在我的 HTML 页面之一上 当我将鼠标悬停在某些链接上时 会显示一些大图像 并且加载这些图像需要一些时间 我不想使用 JavaScript 来预加载图像 有什么好的解决办法吗 HTML5 有一种新方法可以做到这一点 即link prefe

  • 如何在日期选择器中设置不在当前月份的单元格的样式

    我目前正在为我的 JavaFX 应用程序制作注册表 问题是 当日期选择器中的单元格不在页面的月份上时 我想让该单元格变灰 让我们看看我当前的日期选择器 我的日期选择器 正如您所看到的 我希望下个月的日期 27 日 28 日 30 日以及 1

  • 如何强制折断不可折断的字符串？

    我有一个根据数据库中包含的数据生成的 HTML 页面 数据库有时包含浏览器无法分解的长字符串 因为这些字符串不包含可分解的字符 空格 点 逗号等 有没有办法使用 html css 甚至 javascript 来解决这个问题 看到这个link

  • R Shinydashboard 自定义 CSS 到 valueBox

    我一直在尝试将 valueBox 的颜色更改为自定义颜色 超出 validColors 中可用的颜色 但一直无法这样做 我知道有一种方法可以使用标签来包含自定义 CSS 但是我无法将它们放在正确的位置 ui lt dashboardPage

  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can

  • 使用 CSS 覆盖透明 div 中的不透明文本

    我试图使透明 div 内的文本没有不透明度 也就是全黑 div style background 3cc p style background 000 This text should be all black p div 只用 CSS 就

  • CSS - div 与父 div 底部对齐（内联块）

    我知道这个 html 很草率 有一些不必要的额外 div 但无论如何 我无法理解为什么 ID 为 info box right 的 div 与父 div 的底部对齐 您可以看到 文本 与下面的 jsfiddle 示例的底部 有什么想法可以让

  • 不使用控件时，视频元素在 Chrome 中消失

    So I think这是一个浏览器错误 它出现在一个更复杂的设计 网站中 但我已经进行了很好的尝试 简化了我的代码和设计等 并发现了以下内容 嵌入时

  • 在 Bootstrap 中使用 CakePHP 时如何修改包装器 div 错误类

    我在用着Bootstrap 3 0RC1 with CakePHP 2 3 6 尝试利用那些漂亮的课程 例如has error and has warning for 验证状态 http getbootstrap com css forms

  • 在webview android中加载本地html文件

    我正在尝试在 android 的 webview 中加载 html 文件的内容 但是 它给了我 网页不可用错误 如果我尝试使用谷歌或雅虎等网站 它们就会起作用 html文件位于src gt main gt assests gt index

  • 如何：带有 onclick 的 div 位于另一个带有 onclick 的 div 中

    只是一个简单的问题 我遇到了 div 与 onclick javascript 之间的问题 当我点击内部 div 时 它应该只触发它的 onclick javascript 但外部 div 的 javascript 也会被触发 用户如何点击

  • 在具有多级分组的 HTML 表格中显示数据

    我必须通过使用 rowspan 进行分组来显示 HTML 表中的一些数据 下面是预期的 GUI 我有如下所示的 JSON 数据 JSON数据here https jsoneditoronline org id 1014438e5489485

随机推荐

  • 比较rapidjson::文档

    我有两个 RapidJSON 文档 一个是我在运行时创建的 另一个是从磁盘读取的 我想比较这两个文件是否相似 比较 RapidJSON 文档的最佳方法是什么 我的 JSON 看起来像这样 SimpleCompany Manager read

  • 如何使用 PHP 读取串口 [重复]

    这个问题在这里已经有答案了 如何使用 php 从连接到我的服务器 运行 kali linux 的旧笔记本电脑 上的 COM 端口的 arduino 读取串行数据 以便我可以在网页上显示数据 我读过有关同一问题的其他问题 所有这些问题要么超级

  • 虚幻引擎 4 中的 C++ 嵌套 JSON

    我有一个从服务器获取的 JSON 对象 如下所示 state 1 player1 alias Player Name ready 0 我能够获取 JSON 将其解析为 FJsonObject 并使用以下代码检索 JSON 对象第一级中的任何

  • 使用多个 Getter 时用 Try-Catch 代替 Null 检查

    我的问题如下 我有一个很长的 Getter 即 objectA getObjectB getObjectC getObjectD getObjectE getName 由于 糟糕的 数据库 实体设计 有些东西比其他东西晚于其他东西引入 它发

  • 获取所选项目的详细信息

    我正在使用sap m ObjectListItem作为我已从 API 绑定 JSON 数据的列表项 但是 当我按下某个项目时 我找不到从列表中获取所选项目的方法 甚至获得该物品的钥匙也会有帮助

  • 用 unicode 分隔符分割字符串？ [复制]

    这个问题在这里已经有答案了 给定字符串 str Led Zeppelin Blackdog 我该如何分割它 最终得到 Led Zeppelin Blackdog but 不是连字符 它被编码为u u2014 我该怎么做 如果您希望清楚地表明

  • 组合词频数据列表

    这似乎应该是一个显而易见的问题 但列表上的教程和文档尚未发布 其中许多问题源于我的文本文件的巨大大小 数百 MB 以及我试图将它们归结为我的系统可以管理的内容 因此 我正在分段进行工作 现在正在尝试合并结果 我有多个词频列表 大约 40 个

  • 如何从堆栈帧中获取泛型参数的类型？

    我们应该通过工厂实例化我们的实体 因为它们在客户端和服务器上的设置不同 我想确保情况确实如此 但无法完全使其发挥作用 public interface IEntityFactory TEntity Create

  • jQuery basic：当单击该行的按钮时，如何删除该行？

    tableid tbody last append html 这会动态创建表行 每个新创建的行都有一个 删除 按钮 现在 如果我单击删除按钮 该行将被删除 我怎样才能做到这一点 提前致谢 buttonSelector live click

  • C++ 编译器如何确保不同但相邻的内存位置可以安全地在不同线程上使用？

    可以说我有一个结构 struct Foo char a read and written to by thread 1 only char b read and written to by thread 2 only 现在据我了解 当两个线

  • R-paste() 函数中的新行[重复]

    这个问题在这里已经有答案了 使用函数时如何插入新行paste http stat ethz ch R manual R patched library base html paste html或者 R 中连接字符串的任何函数 关于这个主题有

  • Ollydbg 1.10“返回用户模式”不起作用

    我尝试学习 莉娜为新手倒车 https tuts4you com download php view 125 当出现一些麻烦时 我使用 ollyDbg 启动 Pixtopian Book 然后尝试使用 MessageBox 来显示有关未注册

  • 将 Apache LANG 更改为 en_GB.UTF-8

    我希望将 Apache 环境 LANG 从 C 更改为en GB UTF 8但找不到在哪里 里面 etc apache2 apache2 conf我添加了AddDefaultCharset UTF 8 基于此 https stackover

  • Java中的静态方法可以使用对象实例来访问[重复]

    这个问题在这里已经有答案了 在 Java 中 创建静态方法来访问它 而无需任何对象实例 这对我来说有一定道理 但最近我发现了一件奇怪的事情 Java中的静态方法也可以通过其对象实例来访问 这对我来说看起来很奇怪 大家知道为什么Java要提供

  • 电子，从浏览器窗口打印到PDF

    我了解电子中 printToPDF 的常用方法是在main调用以下代码的过程 const BrowserWindow require electron const fs require fs let win new BrowserWindo

  • ImageView 中心与 ScaleType Matrix 就位

    我正在使用 ImageView 的缩放效果 所以我需要使用scaletype matrix 现在 我想将中心位置设置为 ImageView 但我无法设置它 请帮助我解决这个问题 布局 xml

  • 找到三元组中间值的最快方法？

    给定的是一个由三个数值组成的数组 我想知道这三个数值的中间值 问题是 最快的方法是什么找到三者的中间点 我的方法是这种模式 因为有三个数字 所以有六种排列 if array randomIndexA gt array randomIndex

  • 使用 facebook 发表评论的按钮不起作用

    我正在尝试使用 Like Button 的 XFBML 实现 如Facebook 社交插件页面 http developers facebook com docs reference plugins like 出现 喜欢 按钮并且工作正常

  • 如何找出我的密钥存储在 Redis Cache/db 中的时间？

    是否有任何 redis 命令可以告诉 key 何时存储在 redis 中 我知道有TTL命令 根据时间的不同 我想采取不同的行动 就像如果 从最后 1 分钟开始 然后做 x 从最后 2 分钟开始 然后做 y ETC 没有这样的命令 但是 您

  • 将元素从容器中分离出来

    我将所有内容包装在具有固定宽度的容器元素中 但我有一个 div 我想 突破 该容器以跨越页面的整个宽度 http dabblet com gist 3207168 http dabblet com gist 3207168 正如您在该示例中

热门标签