css溢出x不工作

Question

我正在尝试将多个 div（图像 -> 黑色块）放入一个容器（图像 -> 蓝色块）中。我需要在容器中放置尽可能多的 div。容器有一个“浮动”宽度，所以它在每个屏幕上都有不同的大小。 “1”（在图片中）代表我今天拥有的东西，它正在工作。

问题是我在整个站点中使用引导弹出窗口，但容器中的溢出不允许它出现。如果我删除溢出属性（图像中的“2”），所有 div 都会出现在“下”行中。我不想滚动，只是隐藏不适合容器的 div。

图中的“3”代表我想要的。

这是我的代码：

// CSS
.content-bar{
        max-width:100%;
        height: 3.5em;
        white-space:nowrap;
        display: inline-block;
        overflow-x: hidden;
        overflow-y: visible;
}

.photo-bar{
        width: 2.5em;
        height: 3.5em;
        margin-right: -.55em;
        padding: 0;
        display: inline-block;
        white-space: normal;                
}

// JS
<div class="content-bar">
        <div class="photo-bar" ng-repeat="...">                    
             // image goes here
        </div>
</div>

Answer 1

如果你希望它是可滚动的，那么你需要这样做：

overflow-x: scroll;

Answer 2

选项 1： 您可以从样式中删除溢出属性。弹出窗口将按预期出现。内联应用属性可以解决代码 sn-p 中的问题，请查看下面显示的 sn-p。

选项 2： 如果您的情况可行：您可以使用溢出隐藏，但您需要为“.content-bar”类设置 padding-top。填充顶部应该是弹出窗口的高度。

// CSS
.content-bar{
  max-width: 100%;
  height: 3.5em;
  white-space: nowrap;
  display: block;
  overflow-x: scroll;
  /*overflow-y: visible;*/
}
.photo-bar {
  width: 2.5em;
  height: 3.5em;
  margin-right: -.55em;
  padding: 5px;
  display: inline-block;
  white-space: normal;
  background-color: lightblue;
  border: 1px solid;
}

<div class="content-bar" style="white-space: nowrap;overflow-x: scroll;">
  <div class="photo-bar">
    <img src="http://placehold.it/50x10" />
  </div>
  <div class="photo-bar">
    <img src="http://placehold.it/50x10" />
  </div>
  <div class="photo-bar">
    <img src="http://placehold.it/50x10" />
  </div>
  <div class="photo-bar">
    <img src="http://placehold.it/50x10" />
  </div>
  <div class="photo-bar">
    <img src="http://placehold.it/50x10" />
  </div>
  <div class="photo-bar">
    <img src="http://placehold.it/50x10" />
  </div>
  <div class="photo-bar">
    <img src="http://placehold.it/50x10" />
  </div>
  <div class="photo-bar">
    <img src="http://placehold.it/50x10" />
  </div>
  <div class="photo-bar">
    <img src="http://placehold.it/50x10" />
  </div>
  <div class="photo-bar">
    <img src="http://placehold.it/50x10" />
  </div>
  <div class="photo-bar">
    <img src="http://placehold.it/50x10" />
  </div>
  <div class="photo-bar">
    <img src="http://placehold.it/50x10" />
  </div>
  <div class="photo-bar">
    <img src="http://placehold.it/50x10" />
  </div>
  <div class="photo-bar">
    <img src="http://placehold.it/50x10" />
  </div>
  <div class="photo-bar">
    <img src="http://placehold.it/50x10" />
  </div>
  <div class="photo-bar">
    <img src="http://placehold.it/50x10" />
  </div>

</div>

Answer 3

相信你在找overflow-x:scroll;