Question

我正在我的网站上工作，我有一个包含6个div的div容器，分为两行，每行3个div。

<div id="container">
<div class="item">Description image 1</div>
<div class="item">Description image 2</div>
<div class="item">Description image 3</div>
<div class="item">Description image 4</div>
<div class="item">Description image 5</div>
<div class="item">Description image 6</div>
</div>

容器宽度设置为100％，溢出设置为隐藏。容器内div的宽度设置为33％，因此它（几乎）填充容器的整个宽度。

#container {
width: 100%;
overflow: hidden;
}

#container div {
width: 33%;
}

当悬停在这6个div中的一个上时，它的缩放比原始大小的1.1倍，这就是我遇到问题的地方。

.item {
float: left;
width: 100%;
border: 1px solid;
border-color:  #575757;
position: relative;
opacity: 0.5;

-o-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}

.item:hover {
z-index: 10;
opacity: 1;

-o-transform: scale(1.1);
-ms-transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

因为溢出被设置为隐藏，当它超过其父级的设置大小时隐藏内容，这对于屏幕的左侧和右侧是好的，但我不希望这发生在屏幕的顶部和底部。图像。

有没有办法允许两排顶部和底部溢出，同时保持溢出隐藏在两侧？

我创建了this小提琴，它或多或少地显示了我的问题（改变了音阶来戏剧化效果：P）。

干杯！

Answer 1

您应该overflow-x: hidden; #container使用#container { width: 100%; overflow-x: hidden; }水平隐藏内容，但如果您的内容超出垂直范围，则会显示滚动条。

{{1}}

Demo

隐藏水平溢出时允许垂直溢出

1 个答案: