div의 오른쪽 하단에 이온 버튼 정렬 (Align an ionic button at the bottom right of a div)

문제 설명

div의 오른쪽 하단에 이온 버튼 정렬 (Align an ionic button at the bottom right of a 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;
  }

누군가 도와줄 수 있습니까? 감사합니다.

참조 솔루션

방법 1:

When I needed to put the left and right buttons ("<" and ">") I used class "row" and "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>

Result

방법 2:

And why not to do it this way?

  <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>

...moving the button (and the container <div>) out of the slider.

(by Bagusflyer、AdsHan、beaver)

참조 문서

1. Align an ionic button at the bottom right of a div (CC BY‑SA 2.5/3.0/4.0)