Question

我在桌子里面有一张桌子。为了使表格列的宽度与表格标题匹配，我使用了具有设定宽度的跨度。我想过渡到RowSpans和ColSpans以更优雅的方式解决此问题，但我仍然想知道为什么会有这个问题。

为什么我使用样式float:left时将div设置为height：0px？

这将导致红色背景的div与表格中表格的第一个“行”重叠。我可以手动将div高度设置为40px，但是我不知道应用程序中的第一个div有多高。

<table border=1>
  <tbody>
    <tr>
      <td>
        <!-- this div height is 0px with float:left present -->
        <div style="background-color:green;">
          <span style="display: inline-block; width: 150px; float:left; background-color:orange;">Some Text</span>
          <span style="display: inline-block; width: 250px; float:left; background-color:orange;">Some More Text</span>
          <span style="display: inline-block; width: 200px; float:left; background-color:orange;">Some Multiline<br/>Text</span>
        </div>
        <div style="background-color:red; height:150px;">
          BIG ELEMENT
        </div>
      </td>
      <td>
        <input type="text"/>
      </td>
      <td>
        Stuff
      </td>
    </tr>
  </tbody>
</table>

带有<span> float的<div>：左侧高度设置为0px

0 个答案: