如何将一个按钮放置在图像的右下方？

我有一个离子幻灯片框，它显示图像。我想将一个按钮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>

我做了以下但我想知道我怎样才能按钮是float: right的IMG内部：

.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

来源

2015-12-03 user1354934

您可以创建一个jsfiddle或代码片段吗？欢迎来到stackoverflow。 – www139

嘿，拜托，我不知道该怎么做。我可以发布输出的屏幕截图 – user1354934

你必须在某个时候学习，所以我将解释如何使用它:)转到http://www.jsfiddle.net并输入你的HTML，CSS和JavaScript码。默认情况下，JavaScript代码在页面加载时运行，但如果您想创建自己的事件监听器，则可以通过转到javascript面板中的齿轮图标并将其更改为“无头部换行”来更改设置。点击运行，输入代码进行实验，完成后点击“保存”。然后分享你的问题的链接，让大家看到:) – www139

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

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

上面的代码将可以帮助你给的图像按钮。

来源

2015-12-03 07:56:45

谢谢Ajit。这非常接近我的目标！这次真是万分感谢 – user1354934

如何将一个按钮放置在图像的右下方？

回答

相关问题