css溢出x无法正常工作

Question

我试图在容器中放置多个div(图像 - >黑色块)(图像 - >蓝色块).我需要在容器中放置尽可能多的div.容器具有"浮动"宽度,因此在每个屏幕中具有不同的尺寸."1"(在图像中)代表我今天所拥有的,它正在发挥作用.

问题是我在整个站点中使用bootstrap popover,但容器中的溢出不允许它出现.如果我删除溢出属性(图像中的"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;