Div获得0高度而不是其父级的%

时间:2016-12-01 23:42:40

标签: css

在下面的代码中,当图像存在但红色背景的div获得0高度但删除了图像节点时,它从父级获得正确的60px高度。它为什么以及如何纠正?

这里也是jsfiddle链接:https://jsfiddle.net/zuymamq7/



html,body{
  width:100%;
  height:100%;
}

    <table style="width:100%;height:100%;">
      <tr style="height:60px;">
        <td>
          <div style="width:100%; height:100%; background-color:blue;">
          <img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;"></img>
          <div style="display:inline-block;width: 10%; height:100%; background-color:red;">
          </div>
          </div>
        </td>
      </tr>
      <tr>
        <td>
       </td>
     </tr>
   </table>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

当我开始编辑时,我注意到了最重要的事情:

您添加了一个关闭图片代码(</img>)。那些不存在。正确的语法是<img src="something.jpg">或更具技术性<img src="something.jpg" />丢掉一些东西(特别是在编辑器中)

我认为这是你想要的,或者至少,我希望。

&#13;
&#13;
html,
body {
  width: 100%;
  height: 100%;
}
&#13;
<table style="width:100%;height:100%;">
  <tr>
    <td style="height:60px">
      <div style="width:100%; height:100%; background-color:blue;">
        <img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;" />
        <div style="display:inline-block;width: 10%; height:100%; background-color:red;">
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
    </td>
  </tr>
</table>
&#13;
&#13;
&#13;

其他方式

如果你可以改变一下HTML,那么这也应该有用。

&#13;
&#13;
html,
body {
  height: 100%;
  width: 100%;
}
table {
  border-collapse: collapse;
}
&#13;
<table style="width:100%;height:100%;">
  <tr style="background-color:blue">
    <td style="height:60px;width:60px;">

      <img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;" />
    </td>
    <td style="background-color:red; width:10%">
      
        Text
      

    </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>
    </td>
  </tr>
</table>
&#13;
&#13;
&#13;