它的一个 JSFiddle:http://jsfiddle.net/24tL8mkq/3/
我希望红色突出显示一直贯穿整个框。
现在,它的设置是这样的:
<div style='width: 500px; overflow: auto; border: 1px solid black; padding-top:-5px;'>
<pre id='pre_1'>
<!-- code box -->
</pre>
</div>
相关的 css(这是我想通过溢出扩展到整个 div 的 CSS)是:
.bad {
background-color: palevioletred;
width: 100%;
}
我知道我不能使用 width: 100%
因为它总是只会延伸到溢出的最右边,但我不能设置静态宽度,因为我不这样做'知道盒子的尺寸是多少。
如果可能的话,我真的更愿意将其保留为 HTML/CSS 解决方案,只是为了使其尽可能可移植。
最佳答案
有趣的问题。以下适用于最新的 Firefox、Chrome 和 IE11,尽管我认为这有点“实验性”——如果您需要支持更广泛的浏览器,绝对应该进一步测试。
http://jsfiddle.net/24tL8mkq/5/
pre {
display: table;
}
pre > div { display: flex; }
我希望我能告诉你为什么这有效,但我不知道。但是,我找不到另一种有效的组合。我的猜测:将 pre
设置为 display: table
可以使宽度大于 100% (500px),就像表格一样(当它们的子项宽度大于 table )。在 div
子级上设置 flex
会填充可用空间,因为所有子级都应该等宽。
关于html - 继续 div 元素越过水平溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29523581/