如何将我的glyphicon放在div元素的右下角？ [英] How do I place my glyphicon in bottom right corner of div element?

问题描述

< div class =piccardid =[e-mail]>

< div class =toolsid =t- @ ii>

< span id =[e-mail] =glyphicon glyphicon-minus-sign trashicon>< / span>

< / div> ;

< a class =fancyboxtitle =@ titleid =[e-mail] =gallerystyle =href =@（x.Path +？image =+ encryptedtoken1）>

< img class =thumbsdata-pcon =@ x.Nameonload =imgLoaded（this）data-newimagename = src =data：image / gif; base64，somerandomvalue /// somerandomvaluedata-src =@（x.Path +？image =+ encryptedtoken1）id =[e-mail] =正在加载.../>

< / a>

< a id =[e-mail]-filename =@ x.Namehref =＃imagedescriptionstyle =@ titledisplaydata-title =@ titledata-description =@ Description@titledisplay data-lat =@ x.Lat data-lon =@ x.Londata-make =@ x.Makedata-ecapture =@ x.ExifCaptureTimedata-model =@ x.Modeldata-imgsrc =@（x.Path +？image =+ encryptedtoken1）class =addtitlebutton fancybox>

< span id =[e-mail] =stitlestyle =opacity：@ Model.Titleopacity> @ title< / span>

< / a>

< div class =toolsid =imgT- @ ii> ;

< span id =[e-mail] =glyphicon glyphicon-retweet imgTransform>< / span>

< / div> ;

< / div>





以上是我的HTML。我想把类imgTransform放在父div的右下角，它有类piccard。我怎么做？



我尝试过的事情：

 .piccard {
 margin：0; 
 border-radius：5px; 
 vertical-align：top; 
 cursor：pointer; 
仓位：绝对; 
 top：0; 
左：0; 
底部：15px; 
右：0; 
} 
 
 .imgTransform {
 position：relative; 
保证金：5px; 
 float：right; 
颜色：#ffffff; 
 font-size：1em; 
 -moz-transition：.1s; 
 -o-transition：.1s; 
 -webkit-transition：.1s; 
过渡：.1s; 
底部：5px; 
} 

解决方案

尝试：

。 imgTransform  {
  position  ： 绝对值;  
  bottom  ：  5px;  
  right  ：  5px;  
 。 .. 
 }  

位置 - CSS | MDN [ ^ ]

<div class="piccard" id="[e-mail]">
<div class="tools" id="t-@ii">
<span id="[e-mail]" class="glyphicon glyphicon-minus-sign trashicon"></span>
</div>
<a class="fancybox" title="@title" id="[e-mail]" rel="gallery" style="" href="@(x.Path + "?image=" + encryptedtoken1)">
<img class="thumbs" data-pcon="@x.Name" onload="imgLoaded(this)" data-newimagename="" src="data:image/gif;base64,somerandomvalue///somerandomvalue" data-src="@(x.Path + "?image=" + encryptedtoken1)" id="[e-mail]" alt="Loading..." />
</a>
<a id="[e-mail]" data-filename="@x.Name" href="#imagedescription" style="@titledisplay" data-title="@title" data-description="@Description" @titledisplay data-lat="@x.Lat" data-lon="@x.Lon" data-make="@x.Make" data-ecapture="@x.ExifCaptureTime" data-model="@x.Model" data-imgsrc="@(x.Path + "?image=" + encryptedtoken1)" class="addtitlebutton fancybox">
<span id="[e-mail]" class="stitle" style="opacity:@Model.Titleopacity">@title</span>
</a>
<div class="tools" id="imgT-@ii">
<span id="[e-mail]" class="glyphicon glyphicon-retweet imgTransform"></span>
</div>
</div>


Above is my html. I want to place class imgTransform to bottom right of parent div which has class piccard. How do i do it?

What I have tried:

.piccard {
    margin: 0;
    border-radius: 5px;
    vertical-align: top;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 15px;
    right: 0;
}

.imgTransform{
    position: relative;
    margin: 5px;
    float: right;
    color: #ffffff;
    font-size: 1em;
    -moz-transition: .1s;
    -o-transition: .1s;
    -webkit-transition: .1s;
    transition: .1s;
    bottom: 5px;
}

解决方案

Try:

.imgTransform{
    position: absolute;
    bottom: 5px;
    right: 5px;
    ...
}

position - CSS | MDN[^]

这篇关于如何将我的glyphicon放在div元素的右下角？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！