對齊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;
}