право выравнивания текста DIV внутри IMG элемента

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 не всегда занимает 100% от .photo-group div. , если бы я поставил ширину: 100% на img, все будет хорошо, но я хочу отобразить img, не изменяя его разрешение.

Как я могу это достичь?

всякая помощь будет очень признательна!

Спасибо, Alon

Answer 1

Если вы хотите содержание на изображении, вам нужно, чтобы он установлен абсолютный;

.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; 
} 

Answer 2

Это будет делать трюк для вас:

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

JSFiddle

display:inline-block; предотвратит родительский DIV от растягивания и оборачивает его вокруг содержания.

Answer 3

*{ 
 
    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 4

Попробуйте так: Demo

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