当前位置: 首页 > 面试题库 >

溢出:隐藏会影响布局吗?

闾丘朗
2023-03-14
问题内容

除了参考JSFiddle上的以下示例外,我无法解释这一点-在该示例中,引入BLUE:hidden属性后,最后一个BLUE框未按预期扩展到宽度的100%。

我的印象是溢出:隐藏只会影响可见性,而不会干扰布局。有人可以解释此示例中的情况吗?

编辑: 此问题似乎仅限于webkit浏览器(例如Chrome)


问题答案:

这是因为overflow: hidden,除其他属性外,还引入了新的_块格式化上下文_ 。

您可以在这篇出色的文章中了解有关效果: 溢出的魔力:隐藏

更新:
我已经将您的jsFiddle重写为可以正常工作的东西(已在Chrome上测试)。我没有margin- left#red和上进行定义#blue(由于会有所不同overflow: hidden),而是放了一个margin-righton
#yellow



 类似资料:
  • 通过引导程序看起来他们支持折叠较小屏幕的菜单栏项。页面上的其他项目有类似的吗? 例如,我有一个和导航药丸一起漂浮的权利。在小屏幕上,这会导致问题。我想至少把它放在一个类似的点击显示更多的下拉列表中。 这在现有的Bootstrap框架中可能吗?

  • 嗯,我也试着把它藏在身体里!还是不工作..?

  • 问题内容: 我需要显示大于其父元素的子元素,但不删除overflow:hidden;。这可能吗?parent元素的 子元素一旦脱离父边界,就会被剥离。 (元素定义了其他的css,我只是为了清楚起见放置了样式属性) 问题答案: 这是完全不可能做到你想要什么都和父..相反,你可以引入额外的儿童并移动到这一点。 HTML: CSS:

  • 问题内容: 我有一些HTML表格,其中文本数据太大而无法容纳。因此,它可以垂直扩展单元格以适应此情况。因此,现在发生溢出的行的高度是数据量较小的行的两倍。这是无法接受的。如何强制表格具有相同的行高? 这是一些重现该问题的标记。表格仅应为一行的高度,并隐藏溢出的文字。 问题答案: 需要在单元格上和单元格上指定两个属性。您还需要将移至单元格

  • 问题内容: 我们有两个DIV,一个嵌入另一个。如果外部DIV的位置不是绝对的,则内部DIV的位置绝对是不遵守外部DIV所隐藏的溢出的。 是否有机会使内部DIV服从外部DIV的隐藏溢出,而无需将外部DIV设置为绝对位置(因为这会破坏我们的完整布局)?相对于内部DIV的相对位置也不是一种选择,因为我们需要“增长”到表TD(exmple)。 还有其他选择吗? 问题答案: 制作外,以和内到。它应该为您工作

  • 我在努力使用我的应用程序。它应该像下面这样工作。