如何將一個按鈕放置在圖像的右下方？

我有一個離子幻燈片框，它顯示圖像。我想將一個按鈕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

如何將一個按鈕放置在圖像的右下方？

回答

相關問題