Question

当div上的宽度为width: auto;时，是否可以将div的宽度设置为与其最近的兄弟相同？

在my jsFiddle中你会看到我有一个红色，绿色和蓝色div。我希望蓝色div调整到绿色div的大小（这是动态的）。因此，如果绿色div的效果为200px，那么我希望蓝色div为200px。

最初我以为我可以将蓝色div放在绿色div中并在孩子身上设置display: inline-block，但这不起作用。

因此，如果蓝色div的内容增加，那么它将不会推动绿色div的宽度（或容器div）。如何实现这一目标？

Answer 1

如果您愿意使用JavaScript，则只要您想跟踪的div发生变化，就可以调整宽度。使用jQuery，很简单：

$(document).ready(function() {
    // Function to sync the sizes of the divs
    function syncSize() {
        $("#banner_description").width($(".banner_secondary_title").outerWidth(true));
    }

    // Sync the size when a change is made
    $(".banner_secondary_title").resize(function(e) {
        syncSize();
    });

    // Initial sync after document setup
    syncSize();
});

以下是添加此代码的jsFiddle的分支，另外我在辅助标题中添加了更多文字以展开它以显示其有效。

Answer 2

将蓝色div放入绿色div中，向蓝色div添加一个非常高的负margin-right（-999em或其他东西），以便它不会拉伸其父绿色div。

替代方案：将蓝色div放在绿色div中，给蓝色div position:absolute。给绿色div padding-bottom匹配蓝色div的高度。这只有在蓝色div的高度不是动态的情况下才有效。

将div的宽度设置为与其最近的兄弟相同

2 个答案: