对齐div右下角的离子按钮

Question

我想在div的右下角放置一个离子按钮。 但这并没有我预期的那样。 这是屏幕截图：

我的html：

离子空白启动器

  <ion-slide-box>
    <ion-slide ng-repeat="image in images">
      <div class="slider-container">
        <img ng-src="{{image.src}}" style="width:100%;height:auto;margin:0;display:block" >
        <button class="bottom-right button button-positive icon-left ion-home">Home</button>
      </div>
    </ion-slide>
  </ion-slide-box>

CSS：

  .slider-container {
    margin: 0;
    padding:0;
    position:relative;
  }

  .bottom-right {
    position:absolute;
    bottom: 0;
    right: 0;
  }

有人可以帮忙吗？ 谢谢。

Answer 1

当我需要放置左右按钮（“ <”和““>”）时，我使用了“ row”和“ col”类

    <div class="row">
        <div class="col col-10">
            <button class="button button-block button-icon button-clear ion-chevron-left" ng-click="slidePrevious()"></button>
        </div>
        <div class="col">
            <ion-slide-box on-slide-changed="mudaSlide($index)">
                <ion-slide ng-repeat="i in items">
                    <img class="button " ng-src="{{i.imagem}}" style="width: 128px; height: 128px; padding: 0; border: none; background: none;" ng-click="abreExibecaoImagem($index)"></img>                        
                </ion-slide>
            </ion-slide-box>
        </div>
        <div class="col col-10">
            <button class="button button-block button-icon button-clear ion-chevron-right" ng-click="slideNext()"></button>
        </div>
    </div>

结果

Answer 2

为什么不这样做呢？

  <ion-slide-box>
    <ion-slide ng-repeat="image in images">
      <div class="slider-container">
        <img ng-src="{{image.src}}" style="width:100%;height:auto;margin:0;display:block" >
      </div>
    </ion-slide>
  </ion-slide-box>
  <div class="slider-container">
    <button class="bottom-right button button-positive icon-left ion-home">Home</button>
  </div>

...将按钮（以及容器<div> ）移出滑块。