html - 是否可以仅根据其一个子项的宽度来调整容器的大小？

Question

这是 html:

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

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

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

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

display:inline-block 单独不起作用，因为容器会调整其大小以适应最宽的 child 。

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

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

换句话说:页脚和页眉跟随容器的宽度。内容的大小决定了容器的宽度。

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

就代码而言，它有点粗糙，但它会让您入门。