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

当我需要按下左右按钮时（＆＃34;＆lt;＆＃34;和＆＃34;＆gt;＆＃34;）我使用了＆＃34; row＆＃34;和＆＃34; col＆＃34;

    <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>）移出滑块。

对齐div右下方的离子按钮

2 个答案: