javascript - 选择带空格的父级高度 :nowrap

Question

所以我有这些 DIV，我已安排它们在父级内部向左向右滑动。

请参阅以下 JSFiddle 以查看设计:

http://jsfiddle.net/StevP/C9WL7/

您可以看到，通过将第一个子 DIV 的 margin-left 调整为 -100% 的倍数，可以非常简单地在父级内正确地水平放置 DIV。因此，制作动画非常容易。

现在，这让我想到了我的问题。我正在使用 jQuery 左右移动它们。它很好用。但是，我想选择 parent 从哪个 child 那里获得高度。

我知道，我可以添加...

    $('#parent').height($('.child:eq()').outerHeight());

...这就是我目前正在做的事情。然而， child 的内容可能会改变，导致他们调整大小(通过动画)，因此被切断。因此，设置高度是不可能的。

我需要使用高度:自动；在 parent 身上并以某种方式导致它忽略特定 child 的高度。我这辈子都想不出办法。

我不想使用计时器并且 onresize/.resize() 似乎不适用于我的 Chrome。

Answer 1

您可以使用 jQuery 来监视 DOM 子树并在回调中调整父 div 的高度，如下所示:

$('.content').bind('DOMSubtreeModified', function(e) {
    if (e.target.innerHTML.length > 0) {
        $(".parent").height($(".content").height());
    }
});

这是一个有效的 jsfiddle:http://jsfiddle.net/9386d/

还有一个解释 dom 子树的问题:jQuery watch for domElement changes?

bind() 的 jQuery 文档:http://api.jquery.com/bind/