5

我希望有人来清理我大脑中的蜘蛛网。我试图在这里说明（系统不允许我发布 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 具有可变宽度。

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

是否有另一种方法来获得这些结果？

谢谢，

拉尔夫

4

2 回答 2

0

有趣的问题。在投降到 js 解决方案之前，我尝试了很多，但我能得到这些结果的唯一方法是按照希望我帮助他的回答中所建议的去做。

我带着一个工作样本来到这里：

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

$(document).ready(function() {
    $('#div1').css('width', $('#div2').css('width'));
});
于 2012-08-09T18:52:08.307 回答
0

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

于 2012-08-09T18:07:32.693 回答