如何在不指定父级宽度的情况下防止子级 div 扩展父级？答案

【问题标题】：How to prevent child div from expanding parent without specifying width of parent?如何在不指定父级宽度的情况下防止子级 div 扩展父级？
【发布时间】：2012-08-07 00:38:45
【问题描述】：

我希望有人能帮我清理一下我脑子里的蜘蛛网。我试图在这里说明（系统不允许我发布 GIF，所以我使用 ASCII 艺术）

|--------------------------------------------------------------------|
| Browser Window                                                     |
|                                                                    |
| |--------------------------------------------------|               |
| |  Parent DIV                                      |               |
| |                                                  |               |
| |  |-----------------------------------------|     |               |
| |  | Child DIV #1                            |     |               |
| |  |                                         |     |               |
| |  |                                         |     |               |
| |  |                                         |     |               |
| |  |                                         |     |               |
| |  |                                         |     |               |
| |  |                                         |     |               |
| |  |-----------------------------------------|     |               |
| |                                                  |               |
| |                                                  |               |
| |  |-----------------------------------------|     |               |
| |  | Child DIV #1                            |     |               |
| |  |                                         |     |               |
| |  |                                         |     |               |
| |  |                                         |     |               |
| |  |                                         |     |               |
| |  |                                         |     |               |
| |  |                                         |     |               |
| |  |-----------------------------------------|     |               |
| |                                                  |               |
| |                                                  |               |
| |--------------------------------------------------|               |
|                                                                    |
|                                                                    |
|                                                                    |
|                                                                    |
|--------------------------------------------------------------------|

我想要一个包含 2 个子 DIV 的父 DIV。子 div #1 中有一个很长的段落。子 DIV #2 包含显示在表格中的可变宽度内容。

我希望父 DIV 扩展至子 DIV #2 的宽度，我希望子 DIV #1 仅扩展至父 DIV 的宽度，而不进一步扩展父 DIV。

我将所有 3 个 DIV 设置为 float:left。

如果我只包含子 DIV #2，则父 DIV 会扩展到表格的宽度（加上填充等）——这正是我想要的。只要我包含 DIV #1，父 DIV 就会扩展到浏览器窗口的宽度，因为子 DIV #1 也一样宽。

我可以限制父 DIV 的宽度，但我不想这样做，因为子 DIV #2 的宽度可变。我可以限制子 DIV #1 的宽度，但我不想这样做，因为我希望它与子 DIV #2 的宽度相同，而 DIV #2 的宽度可变。

我不想限制任何高度，因为每个框中的内容量是可变的。

还有其他方法可以得到这些结果吗？

谢谢，

拉尔夫

【问题讨论】：

标签： javascript jquery css html

【解决方案1】：

我不完全确定我理解你，但我会尝试从两个内部 div 中删除 float:left。我会将父级的宽度设置为自动，将子级 1 的宽度设置为 100%。这应该允许父级将自己的大小调整为更大的 div（子级 2），然后让子级 1 扩展到其容器的大小。我希望这有帮助。另外，如果您可以发布一个 js fiddle 让我看看您有什么，我可能会提供更好的帮助。

【讨论】：

【解决方案2】：

有趣的问题。在投降到 js 解决方案之前，我尝试了很多，但获得这些结果的唯一方法是按照 Hope I Helped 在他的回答中提出的建议。

我带着working sample来到这里：

基本上，使用 jQuery，您可以编写如下代码：

$(document).ready(function() {
    $('#div1').css('width', $('#div2').css('width'));
});

【讨论】：