Question

我有一个溢出的bx滑块：隐藏在它的包装上。我的布局规定，一个元素应该从盒子中突破并位于顶部边缘之上。

根本听起来不太难 - 这就是溢出-y和x的含义。我想。但无论我做什么，一旦我将其中一个值设置为隐藏，另一个（x或y）也被隐藏。

我做了一个模拟滑块的测试用例。我只希望灰色元素以完整大小显示在包装盒之外。在流入视口之前，不应显示下一个元素。

＆＃13;

.wrapper {
  margin: 50px auto;
  width:400px;
  overflow-x:hidden;
}

.sliderContainer {
  width:1400px;
}

.sliderElement {
  width:400px;
  height:200px;
  background-color:red;
  display:inline-block;
  margin-right:50px;
}

.breakoutElement {
  width:50px;
  height:50px;
  background-color:grey;
  margin: -25px auto 0 auto;
}

＆＃13;

<div class="wrapper">
  <div class="sliderContainer">
  
  <div class="sliderElement">
    <div class="breakoutElement"></div>
  </div>
    
  <div class="sliderElement"></div>
  <div class="sliderElement"></div>
  
  </div>
</div>

＆＃13;

Answer 1

而不是边距添加填充到包装器。试试这个

＆＃13;

.wrapper {
  margin: auto auto;
  padding:50px 0px;
  width:400px;
  display:block;
  overflow-x:hidden;
}

.sliderContainer {
  width:1400px;
}

.sliderElement {
  width:400px;
  height:200px;
  background-color:red;
  display:inline-block;
  margin-right:50px;
}

.breakoutElement {
  width:50px;
  height:50px;
  background-color:grey;
  margin: -25px auto 0 auto;
}

＆＃13;

<div class="wrapper">
  <div class="sliderContainer">
  
  <div class="sliderElement">
    <div class="breakoutElement"></div>
  </div>
    
  <div class="sliderElement"></div>
  <div class="sliderElement"></div>
  
  </div>
</div>

＆＃13;

Answer 2

此行为的原因是the W3C spec：

[...]某些“可见”组合是不可能的：如果一个被指定为“可见”而另一个是“滚动”或“自动”，则“可见”设置为“自动”。< / p>

您只需为幻灯片元素添加上边距并相应调整其大小：

.sliderElement {
  ...
  height: 175px;
  margin-top: 25px;
  ...
}

如果您希望幻灯片正好是200px，只需调整包装器高度即可。

.wrapper {
  margin: 50px auto;
  width: 400px;
  overflow-x: hidden;
}

.sliderContainer {
  width: 1400px;
}

.sliderElement {
  width: 400px;
  height: 175px;
  background-color: red;
  display: inline-block;
  margin-right: 50px;
  margin-top: 25px;
}

.breakoutElement {
  width: 50px;
  height: 50px;
  background-color: grey;
  margin: -25px auto 0 auto;
}

<div class="wrapper">
  <div class="sliderContainer">

    <div class="sliderElement">
      <div class="breakoutElement"></div>
    </div>

    <div class="sliderElement"></div>
    <div class="sliderElement"></div>

  </div>
</div>

有关溢出问题的详细信息，请参阅this post。

溢出-x仅隐藏

2 个答案: