如何修復圖片右側圖標的位置

PS：我對CSS很陌生，我正在努力研究移動響應式UI，所以請讓我免費if什麼都傻！如何修復圖片右側圖標的位置

我有一個圖像，在圖像的左側我顯示一個文本，並在右邊我顯示一個圖標。但我無法修復圖標的位置。它不斷變化。以下是供參考的圖片。

下面是我的代碼

.banner-image { 
 
    height: 140px; 
 
    width: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 

 
.text-over-image { 
 
    z-index: 100; 
 
    position: absolute; 
 
    color: white; 
 
    margin-top: -180px; 
 
} 
 

 
.pull-right { 
 
    float: right!important; 
 
} 
 

 
.mt-45 { 
 
    margin-top: -45px; 
 
} 
 

 
.mr-25 { 
 
    margin-right: -25px; 
 
}

<div> 
 
    <img class="banner-image" src="/assets/[email protected]" alt="[email protected]"> 
 
    <div class="text-over-image"> 
 
    <h4 class="title-font">Speed Management</h4> 
 
    <h5>- Exploring 3 interactions that creates great impact</h5> 
 
    <a href="/user_profiles/2/user_notes/new?book_summary_id=3"> 
 
     <img height="15" width="15" class="mt-45 pull-right mr-25" src="/assets/[email protected]" alt="[email protected]"> 
 
    </a> 
 
    </div> 
 
</div>

有什麼想法和建議，解決問題是非常感謝！

來源

2017-10-11 Pavan

上傳的圖像沒有顯示出於某種原因。如果有人能解決它將是非常有幫助 – Pavan

https://meta.stackoverflow.com/questions/357690/imgur-returning-503-service-unavailable?cb=1 –

@SebastianBrosch啊！謝謝！這是多麼糟糕的時機！ – Pavan

經過一番研究，我發現了這個問題。問題是圖標被放置在div內部，上下文是動態的，它們的位置是固定的。所以我把這個圖標移出了div，並調整了CSS並且它工作了！這是我想出的

<div> 
    <img class="banner-image" src="/assets/[email protected]" alt="[email protected]"> 
    <a href="/user_profiles/2/user_notes/new?book_summary_id=1"> 
    <img height="15" width="15" class="mt-125 pull-right add-note" src="/assets/[email protected]" alt="[email protected]"> 
    </a> 
    <div class="text-over-image"> 
    <h4 class="title-font">The 5 Appreciation Languages</h4> 
    <h5>- Learn how to lead, inspire and engage through appreciation</h5> 
    </div> 
</div> 

.banner-image { 
    height: 140px; 
    width: 100%; 
    position: absolute; 
    left: 0; 
    top: 0; 
} 

.text-over-image { 
    z-index: 100; 
    position: absolute; 
    color: white; 
    margin-top: -180px; 
} 

.pull-right { 
    float: right!important; 
} 

.mt-125 { 
    margin-top: -125px; 
} 
.add-note{ 
    position: absolute; 
    right: 5% 
}

來源

2017-10-11 12:11:15 Pavan

如何修復圖片右側圖標的位置

回答

相關問題