使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'display'属性,如下所示:

div{
    display: inline-block;
}

这是一个展示解决方案的jsFiddle.

Answer 2

这是很新的但是...

如果你不想让元素成为内联块，你可以这样做：

.parent{
  width: min-content;
}

您还有很多其他选项来配置宽度。在这里阅读更多信息： http: //caniuse.com/#search=intrinsic

Answer 3

您必须通过添加style ="clear:left;"来清除div之后的浮动.在你的连续元素上:

<div style="float: left;">
    <table>...</table>
</div>
<div style="clear: left;">
    ...
</div>