我有一个来自 iframe 的 div。我需要截断 div 的左侧和右侧。
例如,这个div是200像素。我们只想要 中间 100 像素。左50像素和右50像素无意义。
这是我不成功的测试:
div#parent {
border: 2px dotted blue;
max-width: 100px;
}
div#child {
border: 2px solid orange;
left: -50px; left
position: relative;
overflow: hidden ;
max-width: 200px;
min-width: 200px;
}
<div id='parent'>
<div style='text-align: center;' id='child'>
this div will contain a clickable iFrame
</div>
</div>
这几乎可以工作,除了 iFrame 不合作并覆盖左侧的元素。使用负 z-index 效果很好,但它会禁用 iFrame 可点击元素。
提前感谢您的建议。
最佳答案
看起来您已将 overflow: hidden
放在子 div 上,但它确实属于父 div。 overflow
属性指示如何显示元素溢出的 contents,而不是它自己的溢出。因此,将该样式放在父级上将隐藏位于其边缘之外的任何内容, 在里面。
关于jquery - 使用 CSS 截断 div 的两边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29680855/