jquery - 使用 CSS 截断 div 的两边

Question

我有一个来自 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 可点击元素。

提前感谢您的建议。

Answer 1

看起来您已将 overflow: hidden 放在子 div 上，但它确实属于父 div。 overflow 属性指示如何显示元素溢出的 contents，而不是它自己的溢出。因此，将该样式放在父级上将隐藏位于其边缘之外的任何内容, 在里面。