如何在一個div上面的行頂部顯示圖像

我正在處理頁腳。在右側 - 圖像附加 - 我有一個圖像與響應「訂閱」按鈕。有一個普通的行有一個潛水。這個普通的行由兩個不同的行組成。第一行包括兩個網格：col-lg-4/col-lg-8（白色背景）第二個網格包括三個網格：col-lg-4/col-lg-4/col-lg-4（黑色背景）我想把圖像放在第一行最右邊的網格頂部的最右邊的網格的第二行。問題是雖然圖像放在第二行，但它出現在第一行！我要糾正它作爲圖案如何在一個div上面的行頂部顯示圖像

<div class="container-fluid p0 hidden-xs hidden-sm" style="border: solid yellow"> 
    <div class="row"> 
    <div class="col-lg-12 col-md-12 "> 
     <div class="row pb+ pt+ footer-border "> 
     <div class="col-lg-12 col-md-12"> 
      <div class="container"> 
      <!-- brand starts --> 
      <div class="col-lg-4 col-md-4 hidden-xs pl0"> 
       <a href="/"> 
        <i class=" icon-famousLogo icon-color famous-large "></i> 
       </a> 
      </div> 
      <!-- brand ends --> 

      <!-- Social Sharing Start --> 
      <div class="col-lg-8 col-md-8 hidden-xs clearfix"> 
       <div class="col-lg-5 col-md-5 col-offset-7 pt-"> 
       <ul class="list-inline float-r"> 
        <li> 
        <span class="follow-us pr">FOLLOW US</span> 
        </li> 
        <li> 
        <a href="https://www.facebook.com/famousmagazine"> 
         <i class=" icon-facebook icon-color facebook pr "></i> 
        </a> 
        </li> 
        <li> 
        <a href="https://twitter.com/famousweekly "> 
         <i class=" icon-twitter icon-color twitt pr"></i> 
        </a> 
        </li> 
        <li> 
        <a href="https://www.instagram.com/famousweekly/ "> 
         <i class=" icon-instagram icon-color instagram"></i> 
        </a> 
        </li> 
        <!-- They are supposed to be add later after getting the right URL--> 
       <!--<li > 
        <a href="https://www.youtube.com"> 
         <i class=" icon-youtube icon-color youtube"></i> 
        </a> 
        </li> 
        <li > 
        <a href="https://www.instagram.com" > 
         <i class=" icon-Pintrest icon-color pint"></i> 
        </a> 
        </li> 
        <li > 
        <a href="https:https://twitter.com" > 
         <i class=" icon-tumblr icon-color twitt"></i> 
        </a> 
        </li> --> 
        <!-- Hidden Social Sharing Ends--> 
       </ul> 
       </div> 
      </div> 
      <!-- Social Sharing Ends --> 
      </div> 
     </div> 
     </div> 
     <!-- Second Row/Footer Lists Starts --> 
     <div class="row hidden-xs hidden-sm"> 
     <div class="col-lg-12 col-md-12 "> 
      <div class="bottomMenu-parent" > 
       <div class="container"> 
       <div class="col-lg-4 col-md-4 pl0 pt+ pb+" > 
        <table class="footer-table"> 
        <tr> 
         <td><a href="#">ABOUT US</a></td> 
         <td class="pl++"><a href="#">CoNTACT US</a></td> 
        <tr> 
         <td><a href="#">TERMS AND CONDITIONS</a></td> 
         <td class="pl++"><a href="#">ADVERTISE</a></td> 
        </tr> 
        <tr> 
         <td><a href="#">PRIVACY POLICY</a></td> 
        </tr> 
        </table> 
       </div> 
       <!-- Sign up Starts --> 
       <div class="col-lg-4 col-md-4"> 
       </div>  
       <!--Sign Up Ends --> 
       <div class="col-lg-4 col-md-4"> 
        <figure class="p pb0 footer-image"> 
         <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPZA23BVynjg91p0lXTn2yEiCft5VkK70063kgELaL_77gtH_TWg"> 
        </figure> 
        <a href="#" class="subscribe-button" > 
        <button type="button" > 
         SUBSCRIBE <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> 
        </button> 
        </a> 
       </div> 
       </div> 
      </div> 
     </div> 
     </div> 
     <!-- Second Row/Footer List Ends --> 
    </div> 
    </div>  
</div> 

@media(min-width: @screen-sm-min) { 

    .follow-us{ 
     color:@mainpink; 
     .font-family(@font-Oswald-Bold) ; 
     font-size: 12px; 
    } 
    .footer-border{ 
     border: 1px solid @mainpink; 
    } 

    .footer-table{ 
     color:@white !important; 
     text-align: left; 
     tr{ 
      td{ 
       padding-bottom:10px; 
       a{ 
        .font-family(@font-SourceSansPro-Regular) !important; 
        color:@white !important; 
        text-transform: uppercase; 
        font-size:14px; 
       } 
      } 
     } 
    } 

    .footer-image{ 
     position: absolute; 
     bottom: 0px; 
     display: block; 
     width: 100%; 
     text-align: center; 
    } 

}

來源

2016-02-24 Negin

你可以創建一個片段或垃圾箱，與？ –

我已經附上圖片了！ – Negin

是的，但是這個過程的一部分可以幫助您包含調試和代碼「玩」。這就是爲什麼我們需要這個。也許我們可以自己創造它，但我認爲你應該這樣做。（閱讀[如何問]（http://stackoverflow.com/help/how-to-ask）aspecially _「幫助其他人重現問題」_） –

我已經改變了代碼如下那麼它的工作原理：

.footer-image 
{ 
    margin-top: -100px; 
    bottom: 0px; 
    display: block; 
    width: 100%; 
    text-align: center; 
    padding-bottom:0px; 
}

來源

2016-03-06 12:35:51 Negin

如何在一個div上面的行頂部顯示圖像

回答

相關問題