0

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

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

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

因此，如果蓝色 div 的内容增加，那么它不会将绿色 div 的宽度（或容器 div）推出。如何做到这一点？

4

2 回答 2

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的分支，此外，我在辅助标题中添加了更多文本以扩展它以显示它有效。

于 2012-09-26T17:14:23.030 回答
0

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

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

于 2012-09-26T16:25:44.193 回答