Question

我有一个离子滑动盒，它显示图像。我想在图片的右下方添加一个按钮ion-plus-round。我不想将它添加到滑块的右下角，而是仅添加到img的右下角。

<ion-slide-box class="item-slide-box">      
      <ion-slide ng-repeat="image in vm.item.images" ng-cloak >
        <img ng-src="{{image}}">

      </ion-slide>     
    </ion-slide-box>
   <a class="button icon ion-plus-round myButton"></a>

我已经完成了以下操作，但我想知道如何在img中将按钮设为float: right：

.slider {
height: 60vh;
background-color: #76838f;
position: relative;
}

.slider-slide {
 color: #000;
 background-color: #76838f;
 height: 100%;
} 

.slider .slider-slide .img-ng {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    max-width: 100%;
    position: relative;
}

.slider .slider-pager {
    bottom: 45px;
}

 .myButton {
    position: absolute;    
    bottom: 0px;
    right: 0px;
}

codepan：http://codepen.io/anon/pen/gPYBpR

Answer 1

我刚刚编辑了您的代码，您可以在代码窗格中尝试此操作并检查它是否满足您的要求。

Html代码：

<ion-slide-box class="item-slide-box">      
          <ion-slide ng-cloak class="content">     
            <img class="img-ng" ng-src="http://geomorph.sourceforge.net/fourier/Bouboule256.jpg">
            <a class="button icon ion-plus-round myButton"></a>     
          </ion-slide>     
        </ion-slide-box>

添加一些css行，如：

 .content{    
    position:relative;
}

.content a{

    position:absolute;
    bottom:5px;
    right:5px;
}

注意：从css中删除“.myButton”css并在代码中显示图像源后放置按钮，希望这正是你想要的。

例如，如果您确实希望图像上的按钮完全符合示例代码，则可以在代码中实现此代码。

HTML：

  <div class="main">
    <img src="http://placehold.it/182x121"/> 
    <a href="#">Can be BUTTON/LINK</a>
  </div>

CSS：

 .main{    
    width: 182px; /*328 co je 1/3 - 20margin left*/
    height: 121px;
    line-height: 20px;
    margin-top: 0px;
    margin-left: 9px;
    margin-right:0px;
    display:inline-block;
    position:relative;
}

.content a {
    position:absolute;
    bottom:5px;
    right:5px;
    background:blue;
    color:#FFF;
}

上面的代码可以帮助您在图像上给出按钮。

如何将按钮定位到图像的右下角？

1 个答案: