将div的长度限制为其内容

Question

我正在尝试为Aircraft资源构建数据网格。该页面有一个标题，一个用于创建新记录的链接和该表。我有以下HTML：

<div id=body>
    <h2 class="left">Aircraft</h2>
    <%= link_to 'New...', new_aircraft_path, :class => 'button right' %>
    <div style="clear: both;"></div>
    <table>
        (omitted for brevity)
    </table>
</div>

和以下CSS：

.left {
  float: left;
}

.right {
  float: right;
}

.button {
  (omitted for brevity)
}

该表大致扩展为在我的屏幕上使用大约25％。然而，New...按钮向右浮动，延伸到屏幕的最右侧（100％）。我只需要延伸到表格，大约25％。如何约束div的宽度只扩展到表？

Answer 1

将div浮动到左侧。它的宽度现在会缩小以适应内容（即表格的宽度）。应用您需要的任何额外清除，以保持页面布局的其余部分正常工作。

Answer 2

您可以将表格的宽度定义为设定的数字，然后将按钮包装在宽度相同的div中。 http://jsfiddle.net/j5GRH/

如果表格的宽度灵活，您可以在表格中添加按钮：http://jsfiddle.net/j5GRH/3/