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

你必须在你的div之后通过在你的连续元素上添加 style =“clear：left;”来清除浮动：

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

Answer 3

您需要明确清除浮动，以免浮动影响后续元素。有关详细信息，请参阅此article。

Answer 4

这很新但是......

如果您不希望元素成为内联块，则可以执行以下操作：

{{1}}

您还有很多其他配置宽度的选项。在此处阅读更多内容：http://caniuse.com/#search=intrinsic

Answer 5

如果我理解正确，你希望div与表格一样宽，但不能更宽。由于div元素是一个块元素，因此它总是尽可能宽，除非你给它一个明确的宽度。您可以选择添加样式display:inline或使用类似“span”的内联元素。

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

5 个答案: