【问题标题】:Can overflow:hidden affect layout?溢出:隐藏会影响布局吗?
【发布时间】:2011-09-01 22:58:37
【问题描述】:

除了参考下面的example on JS Fiddle-之外,我无法解释这一点,在我引入溢出:隐藏属性后,最后一个蓝色框没有按预期延伸到 100% 的宽度。

我的印象是溢出:隐藏只会影响可见性方面,不会干扰布局。有人能解释一下这个例子中发生了什么吗?

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

【问题讨论】:

  • 您在什么浏览器中看到这些问题?在 FF 中我觉得还可以
  • 我看到他用 chrome 指出了什么。所以可能是 webkit
  • 旁注:您不应该有多个具有相同 ID 的元素,例如蓝色和红色。不过,这不会导致这个问题,我可以在 Chrome/Lin 中看到。
  • 我认为您的样式存在一些问题。首先,您不能两次使用 2 个 ID(使用类)。第二,我不认为你在这里清理你的花车
  • 至少从 v20 开始,Chrome(/Win) 似乎并非如此。

标签: html css layout overflow


【解决方案1】:

这是因为overflow: hidden 在其他属性中引入了一个新的block formatting context

您可以在这篇精彩的文章中了解这些效果: The magic of overflow: hidden

更新:我已经 rewritten your jsFiddle 进入了一些正在工作的东西(在 Chrome 上测试)。我没有在#red#blue 上定义margin-left(由于overflow: hidden 的作用会有所不同),而是在#yellow 上添加了margin-right

【讨论】:

  • @bazmegakapa- 太棒了- 感谢您的指导和重写
猜你喜欢
  • 1970-01-01
  • 2011-03-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-01-01
  • 1970-01-01
  • 2012-08-12
相关资源
最近更新 更多