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

我希望img上的.thumb_icon_content左对齐，以及img上的.thumb_time_content右对齐。主要问题是 img并不总是占用.photo-group div的100％。如果我将宽度：100％放在img上，它会没问题，但我想显示img而不改变它的分辨率。

我怎样才能实现它？

任何帮助都将非常感激！

谢谢，阿龙

Answer 1

这将为您解决问题：

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

JSFiddle

display:inline-block;将阻止父div拉伸并将其包裹在内容中。

Answer 2

＆＃13;

*{
    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;
}

＆＃13;

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

＆＃13;

Answer 3

请尝试以下操作： Demo

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

Answer 4

如果您想要图像上的内容，则需要将其置于绝对位置;

 List<SD> sampleData=newInstance["a"];// Gives the output

在img元素内对齐文本div

4 个答案: