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

Question

看看这个jsfiddle

我试图让我的 div 向右使用父 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您可以为 div 设置样式，display:table-cell并为特定的 div 设置 100% 的宽度，而不是使用它们设置样式。

jsFiddle 示例

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