對齊div右下方的離子按鈕

我想在div的右下方放置離子按鈕。但它沒有像我預期的那樣工作。下面是截圖：對齊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; 
    }

任何人都可以幫忙嗎？謝謝。

來源

2015-11-20 Zhou Hao

演示可能會有所幫助，但我的猜測是您應用的其他類中的一個影響了定位。 –

爲什麼不這樣做呢？

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

來源

2015-11-20 11:15:44 beaver

當我需要把左和右按鈕（「<」和「>」）我使用的類「行」和「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>

結果

來源

2015-11-20 10:27:39 AdsHan

對齊div右下方的離子按鈕

回答

相關問題