logo标签列表

如何在不指定父元素宽度的情况下，防止子元素扩展父元素？

javascriptjquerycsshtml
5

我希望有人可以帮助我清理一下这个问题。我试图在这里说明（系统不允许我发布GIF，所以我用了ASCII艺术）。

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

我想要一个包含两个子DIV的父级DIV。子DIV＃1中有一个长段落。子DIV＃2包含可变宽度的内容，该内容以表格形式显示。
我希望父级DIV扩展到Child DIV＃2的宽度，并且我希望Child DIV＃1仅扩展到父级DIV的宽度，而不会进一步扩展父级DIV。
我将所有3个DIV都设置为float：left。
如果我只包括子DIV＃2，则父DIV会扩展到表格的宽度（加上填充等）-这正是我想要的。但是，一旦包括了DIV＃1，父级DIV就会扩展到浏览器窗口的宽度，因为Child DIV＃1也是那么宽的。
我可以限制父级DIV的宽度，但我不想这样做，因为Child DIV＃2具有可变宽度。我可以限制Child DIV＃1的宽度，但我不想这样做，因为我希望它与Child DIV＃2具有相同的宽度，而DIV＃2具有可变宽度。
我不想限制任何高度，因为每个框中的内容量都是可变的。
是否有另一种方法可以获得这些结果？
谢谢，
Ralph
2个回答
1
有趣的问题。在放弃js解决方案之前，我尝试了很多次，但我能够获得这些结果的唯一方法是按照Hope I Helped在他的答案中建议的方式进行操作。
我带着一个工作示例来到这里：
基本上，使用jQuery，您可以编写类似以下代码的内容：
$(document).ready(function() {
    $('#div1').css('width', $('#div2').css('width'));
});
0

我不完全确定我理解你的意思，但我建议尝试从两个内部div中删除float:left。我会将父元素的宽度设置为auto，将子元素1的宽度设置为100％。这应该允许父元素根据更大的div（子元素2）调整大小，然后使子元素1扩展到其容器的大小。希望这可以帮助到你。如果您可以发布一个js fiddle让我看看您的情况，我可能能够提供更好的帮助。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接