- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我试图理解以下布局情况:我有一个 float 的 div,其宽度未定义,用作容器。在里面我有一个左浮动标题。有一个未 float 的 div 包裹着另一个左浮动的 div。未 float 的 div 用于隐藏具有小视口(viewport)的内容,但这对观察无关紧要。
你可以在这里看到布局结构:jsfiddle before
<div class="container" style="float: left">
<div style="float: left">HEADER</div>
<div style="border: 1px solid green;">
<div style="float: left">
<div class="element">lorem ipsum dolor sit amet. </div>
<div class="element">lorem ipsum dolor sit amet. lorem ipsum dolor sit amet.</div>
<div class="element">lorem ipsum dolor sit amet. </div>
</div>
</div>
</div>
在这个 fiddle 中,当我将文本添加到未 float 的 div 中时,整个容器扩展了它的宽度。看这里:jsfiddle with text .
<div class="container" style="float: left">
<div style="float: left">HEADER</div>
<div style="border: 1px solid green;">TEXT
<div style="float: left">
<div class="element">lorem ipsum dolor sit amet. </div>
<div class="element">lorem ipsum dolor sit amet. lorem ipsum dolor sit amet.</div>
<div class="element">lorem ipsum dolor sit amet. </div>
</div>
</div>
</div>
这是为什么呢?浏览器似乎在一行中测量整个宽度,然后将 float 的 div 与下面一行的 3 个元素放在一起?这是另一个我不明白的问题,但这已经在这里讨论过:Right floated container results in line break .
为什么当标题旁边已经有足够的空间让文本 float 时包含的 div 变得更宽?
edit1:似乎在 ie 中无需将 float 包装到另一行就可以工作。这是 chrome/ff 中的浏览器问题吗?
edit2:我认为所有的问题都可以通过没有建立一套一致的 block 格式化上下文来概括。带有 float 子项的 float div 中的未 float div 似乎是“未定义的”,并且浏览器对这种情况的解释不同。解决方案是建立一致的 BFC。
感谢您的帮助帕特里克
最佳答案
您似乎对 float 的确切工作原理以及相邻的 float 内容和非 float 内容如何在它们周围起作用没有确切的了解(别担心,这可能很难掌握并且需要时间)。
如果我对这个问题的理解是正确的,你想建立一个正确的 block formatting context 对于带有绿色边框的 div
,这可以通过添加 overflow:auto
(以及其他方法)来建立
A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.
当内容显示为折叠时,您通常可以看到在使用 float 时何时可能需要建立 block 格式化上下文。您可以在原始 fiddle 中看到这一点,因为带有绿色边框的 div
不会围绕其 float 内容的边界延伸。添加 overflow:auto
可恢复预期行为。
关于html - float 文本无需扩展容器 div 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29912568/
我正在制作简单播放本地视频的应用程序。 一开始我用https://pub.dev/packages/video_player , video_player: ^0.10.2+1 但是由于某种原因,它在
基本上,我有一个 boolean 值,大型 API 项目中大约 20% 的类都使用它。从实用方法到更大的类,一切都使用它。我可以在程序启动时设置状态(不会改变),但不知道访问它的“最佳”方式。 最初,
我正在处理一些广告数据,例如电子邮件数据。我有两个数据集: 邮件级别,针对每个人,说明他们的邮寄日期,以及他们的转换日期。 import pandas as pd df_emailed=pd.Data
例如,我在 A 列中输入了数据,在 B 列中输入了一些复杂的公式作为 A 中数据的函数。A 中的数据行数取决于用户输入。它可以在 2 到 100,000 之间。传统上,我将使用相同的公式填充 B 列的
我正在寻找一种简单的时钟同步协议(protocol),该协议(protocol)易于实现且占用空间小,并且在没有互联网连接的情况下也可以工作,因此可以用于例如在封闭的实验室网络中。需要明确的是,我不是
这是 Objective-J/Cappuccino 的问题,但我添加了 cocoa 标签,因为框架非常相似。 Cappuccino 的缺点之一是 CoreData 尚未移植,因此您必须手动创建所有模型
例如,如果您按退格键,控制台会显示 keyVal 的空字符串,但这会产生误导,因为 keyVal.length 等于 1 还有一个隐藏字符 element.on('keydown',function(
我已经下载了一个主题,我想安装它。现在我位于“外观”>“主题”>“添加”>“新建/上传主题”。WordPress 需要 FTP 访问。好吧,我在本地计算机上,没有 FTP 服务器正在监听端口 21。
所以我认为我疯了,也许我疯了,但这看起来很简单。假设我有这段代码: let a = {}; a.b.c.d.e.f.g = 'Something Awesome'; 现在您可以想象如果检查噩梦就必须进
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 这个问题似乎不是关于 a specific programming problem, a software
这个问题已经有答案了: How set item checkbox when i click on element span which have this checkbox? (3 个回答) 已关闭
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。 这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
我已经为下拉菜单编写了一个自定义指令。这些元素绝对定位在相对定位的父元素内,因此我需要获取下拉触发元素的高度,以便将实际菜单移动到其下方。触发器是指令元素的子元素。我想避免使用成熟的 jQuery,而
我需要向端点提交表单,但由于我无法控制 CORS header ,因此无法使用 AJAX 执行此操作。 我目前正在通过渲染隐藏的 iframe 并将提交作为目标来执行此操作。但我仍然无法捕获该事件(我
我的 JSON 输入: { "Key": "Team", "Value": "AA" } { "Key": "Division", "Value": "BB" } 期望的输出: [
就目前情况而言,这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放,visit
Pair: BUX/TIX Spread: 113 Rate: 10.159/10.272 High/Low: 115 我想获取值 113 和值 115,但
我正在尝试了解 IPB 论坛的运作方式。 如果我勾选记住我,那么即使我关闭浏览器并重新打开它,我也会保持登录状态。 我正在尝试弄清楚这是如何实现的,因为服务器设置的唯一 cookie 在 sessio
我一直在阅读有关 VIM 的 youcompleteme 插件的内容。然而,问题是我想要一个可以转移到其他开发平台(OpenIndiana、FreeBSD、Linux 和 OS X)上的设置。 使用
我需要找到 Excel 电子表格中的最后一个非空单元格,但我需要它的地址,而不是它的值。 例如:当我想要 K 列中最后一个非空单元格的值时,我使用以下公式: =LOOKUP(2;1/(NOT(ISBL
我是一名优秀的程序员,十分优秀!