Question

我有一个DIV，它将是页面的宽度，但内容可能太宽而不适合。我为它设置了overflow-x：auto，以便内容可滚动。我的问题是，我想让每个子div扩展并在你悬停在它们上时可见，但是如果它们超过了父div，它们当前会被剪裁。

HTML：

    <div class='Content'>
<div class='ImageContainer'>
    <div class='Image'>Container 1</div>
</div>
<div class='ImageContainer'>
    <div class='Image'>Container 2</div>
</div>
<div class='ImageContainer'>
    <div class='Image'>Container 3</div>
</div>
<div class='ImageContainer'>
    <div class='Image'>Container 4</div>
</div>
<div class='ImageContainer'>
    <div class='Image'>Container 5</div>
</div>
<div class='ImageContainer'>
    <div class='Image'>Container 6</div>
</div>
<div class='ImageContainer'>
    <div class='Image'>Container 7</div>
</div>
<div class='ImageContainer'>
    <div class='Image'>Container 8</div>
</div>
<div class='ImageContainer'>
    <div class='Image'>Container 9</div>
</div>
<div class='ImageContainer'>
    <div class='Image'>Container 10</div>
</div>

CSS

.Content {
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
}
.ImageContainer {
    position:relative;
    width:100px;
    height:150px;
    display:inline-block;
}
.Image {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:1;
    border:1px solid black;
    background-color:#AAA;
}
.Image:hover {
    left:-10px;
    top:-10px;
    right:-10px;
    bottom:-10px;
    z-index:2;
}

填充“内容”div是一种解决方法，但并不能解决我的问题。任何CSS专家在那里浪费几秒钟？我知道这可能很容易解决。谢谢！

Answer 1

尝试从“.Content”中删除“overflow”属性并将其包装在另一个类中。例如：

<div class='MainContainer'>
<div class='Content'>
    <div class='ImageContainer'>
        <div class='Image'>Container 1</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 2</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 3</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 4</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 5</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 6</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 7</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 8</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 9</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 10</div>
    </div>
</div>
    </div>

现在，我已将您的内容包装在MainContainer中，以用于样式：

.MainContainer{
    width:100%;
    height:220px;
    overflow-x:scroll;
    overflow-y:hidden;
}

.Content {
    margin:30px 0px;
    white-space:nowrap;
position:relative;
}

点击此处查看结果： https://jsfiddle.net/Lepp23z0/1/

Answer 2

通过完全消除滚动条，我能够使图像容器延伸到父div之外。

这不是理想的但除了this之外我无法在这里找到解决方案：

.Content {
    text-align:center;
    margin:15px;
    border:1px solid black;
}
.ImageContainer {
    position:relative;
    width:80px;
    height:150px;
    display:inline-block;
}
.Image {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:1;
    border:1px solid black;
    background-color:#AAA;
}
.Image:hover {
    left:-15px;
    top:-15px;
    right:-15px;
    bottom:-15px;
    z-index:2;
}

CSS溢出：自动隐藏超出父级大小的绝对定位的子元素

2 个答案: