Richten Sie ein Bild und Text rechts und unten aus

Question

Ich versuche, ein Bild und Text rechts und unten rechts auszurichten, aber ich kann es nicht herausfinden.

Bitte beachten Sie die jsFiddle.

.right-bottom { 
 
    display: inline-block; 
 
    float: right; 
 
}

<img src="http://www.objectpark.net/contentimages/MenuCalendarIconESmaller.gif" alt="live presentations" align="right" width="80" height="75"> 
 
<h2 class="right-bottom">LIVE PRESENTATIONS</h2>

Hier ist ein Bild des Ergebnisses zu erreichen Ich versuche.

Answer 1

Ich schlage vor, ein Containerelement hinzufügen und es auf text-align:right gesetzt. Stellen Sie dann den Text und das Bild auf display:inline-block ein, so dass sie nebeneinander rechts und unten ausgerichtet angezeigt werden, da der Standardwert vertical-alignbaseline ist. Sie können ihn bei Bedarf auch in bottom ändern.

.container { 
 
    text-align: right; /* OR float: right; */ 
 
} 
 
.container h2 { 
 
    display: inline-block; 
 
    margin: 0; 
 
}

<div class="container"> 
 
    <h2>Sample Text</h2> 
 
    <img src="//dummyimage.com/100"> 
 
</div>

Answer 2

Sein unklares, rechts und unten, was? Wenn man sich etwas nach rechts und unten in der Ansicht (Sichtfeld) suchen http://jsfiddle.net/8y0n09v8/

<div class="wrapper"> 
    <img src="http://www.objectpark.net/contentimages/MenuCalendarIconESmaller.gif" alt="live presentations" align="right" width="80" height="75"> 
<h2 class="right-bottom">LIVE PRESENTATIONS</h2> 
</div> 

CSS

.wrapper { 
    position:absolute; 
    bottom:1%; 
    right:1%; 
} 
.wrapper h2 { 
    display: inline-block; 
}