对齐img元素内的文本div

Question

我有一个非常简单的结构，如下所示：

<div class="inline">
    <div class="photo-group thumb_wrapper">
      <img  src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQYZ35nsT0CRTlGBtNmPHikH74wXBldsPe8LQYfhXnzADYo-xSU"
           />
      <div class="thumb_icon label-inverse">
        <p class="thumb_icon_content">
                243 x 324    
        </p>
      </div>
      <div class="thumb_time label-inverse" ><p                 class="thumb_time_content">11.41 Kb</p></div>

http://jsbin.com/nomekagojo/3/edit?html,css,output

我想让.thumb_icon_content在img上对齐，而.thumb_time_content在img上对齐。 主要问题是img并不总是占据.photo-group div的100％。 如果我将width：100％放在img上，那可以，但是我想显示img而不更改其分辨率。

我该如何实现？

任何帮助将不胜感激！

谢谢阿隆

Answer 1

这将为您解决问题：

 p.thumb_time_content {float:right;}
 .inline {display:inline-block;}

的jsfiddle

display:inline-block; 将阻止父div拉伸并将其环绕在内容周围。

Answer 2

 *{ padding: 0; margin: 0; box-sizing: border-box; } .thumb_wrapper { display: table; } .thumb-caption{ display: table; width: 100%; } .thumb-cell{ display: table-cell; vertical-align: middle; } .thumb_time p{ text-align: right; } 

 <div class="inline"> <div class="photo-group thumb_wrapper"> <div class="thumb-cell"> <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQYZ35nsT0CRTlGBtNmPHikH74wXBldsPe8LQYfhXnzADYo-xSU" /> <div class="thumb-caption"> <div class="thumb_icon thumb-cell label-inverse"> <p class="thumb_icon_content">243 x 324</p> </div> <div class="thumb_time thumb-cell label-inverse"> <p class="thumb_time_content">11.41 Kb</p> </div> </div> 

Answer 3

尝试这样： 演示

.inline{
  width:250px;
}
.clear{
  clear:both;
  display:block;
  content:"";
}
.thumb_time_content {float:right;}
 .thumb_icon {float:left;}

Answer 4

如果要在图像上显示内容，则需要将其放置在绝对位置。

.inline {
  display: inline-block;
  width: auto;
  position: relative;
}
.thumb_icon_content {
  position: absolute;
  top: 0px;
}
.thumb_time {
  position: absolute;
  top: 0px;
  right: 0px;
  left: auto;
}