将图像和文本对齐到右侧和底部

Question

我试图将图像和文字右对齐和右对齐，但我无法弄清楚。

请参阅jsFiddle。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是我想要实现的结果的图片。

Answer 1

我建议添加一个容器元素并将其设置为text-align:right。然后将文字和图片设置为display:inline-block，这样它们就会并排显示在右边和底部对齐，默认vertical-align值为baseline，您也可以将其更改为如果需要bottom。

.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

Its unclear right and bottom of what? If you are looking at something right and bottom of the viewport(visible area) 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;
}