Question

html

<div class="xxx">
    <div class="xyz" ng-repeat="item in formList">
        <div ng-show="formList.indexOf(app)!= -1" class="added-item">
            <img class="col-md-6 added-item-icon" ng-src="app.iconFile"/>
        </div>
    </div>
    <div class="abc" ng-hide="formList.length>20">
        <button class="btn" ng-click="addItem()">
            Add<i class="glyphicon glyphicon-plus"></i>
        </button>
    </div>
</div>

css

.xxx {
    width:500px;
    height: 80px;        
}
.added-item-icon, .abc {
    width: 50px;
    height: 50px;
}

我的CSS不好，并且只有非常基础的知识我正在尝试在高度为80像素和宽度为500像素的水平选项卡中添加一些项目列表，也是添加应用程序按钮根据代码，当我们添加第20个应用时，添加应用按钮会消失

我需要做的是，假设xxx div（水平div）可以包含5个项目，然后发生溢出我想将溢出设置为水平，而不是垂直也是在那个阶段（添加5个项目时），我想在xxx分区的最右边修复添加应用程序按钮，并且由于溢出导致的滚动不会影响该按钮，应该将其固定在那里。

我们不需要关心项目图标或添加按钮的大小，请帮助

Answer 1

为此，您需要使用 flexbox 进行调查。要使此工作正常进行，您真正要做的就是将display: flex; flex-direction: column添加到您的容器中，然后将overflow-y: auto添加到您要滚动的部分中。

这里有一个Plunker进行演示。

仅滚动水平行的一部分，保持另一部分不变

1 个答案: