是否可以按照其中一个孩子的宽度来调整容器的大小？

Question

这是html：

<div class="container>
    <div class="header">
    </div>

    <div class="content">
    </div>

    <div class="footer">
    </div>
</div>

我希望container具有content div的大小。 但是我希望header和footer的宽度受content / container的大小限制。

单独

display:inline-block不起作用，因为容器会根据最大的孩子调整其大小。

内容的宽度未知，因此无法设置明确的宽度设置。

以下是解释我需要什么行为的图片。

换句话说：页脚和页眉遵循容器的宽度。 内容的大小定义容器宽度。

Answer 1

你可以使用一些Javascript来做到这一点。像这样：

var size = $('.content').width(); // To get the width of the content element
$('.container').width(size); // To set the width of the container to the width of the content, overriding any CSS rules

代码方面有点粗糙，但它会让你开始。