html - 使 div 宽度自动适应其中的内容

Question

我有一个 div，其中有一个 table。现在我希望这个 div 的宽度自动设置为其中 table 的宽度。

例如:

<div>
  <table>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Sample</td>
      <td>Table</td>
    </tr>
  </table>
</div>

我试着给它 float: left; 属性。它有效，但随后又产生了另一个问题。在此 div 之后放置的任何内容都将放置在它右侧的空白区域中。

需要做什么？

Answer 1

您实际上是在尝试更改该 div 元素的显示模型，因此您应该更改它的 CSS“显示”属性，如下所示:

div{
    display: inline-block;
}

这是一个 jsFiddle演示解决方案。