为什么我的内联div没有占用给定的空间？

Question

看看这个jsfiddle

我想让我的权利使用父div的整个宽度和高度。

任何想法我做错了什么？

下面是HTML

<div style="width:150px;padding:0;min-height:200px;"> 
    <div style="width:100%;background-color:#99CD4E;"> 
    <div style="width:35px;padding:5px;display:inline-block;border: solid 1px #ff0000;"> 
     <img src="/photos/files/5/main/small_thumb.jpg" class="thumb_small "/>  
    </div> 
    <div style="height:100%;display:inline-block;border: solid 1px #ff0000;">user <strong>age</strong><br>town, state</div> 
</div> 

Answer 1

，而不是与display:inline-block其样式，你可以用display:table-cell样式的div并给予特殊股利的100％的宽度。

jsFiddle example

<div style="width:150px;padding:0;min-height:200px;"> 
    <div style="width:100%;background-color:#99CD4E;"> 
    <div style="width:35px;padding:5px;display:table-cell;border: solid 1px #ff0000;"> 
     <img src="/photos/files/5/main/small_thumb.jpg" class="thumb_small "/>  
    </div> 
    <div style="height:100%;width:100%;display:table-cell;border: solid 1px #ff0000;">user <strong>age</strong><br>town, state</div> 
</div>