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设置样式，而不是使用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>

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

1 个答案: