Html 容器的宽度由第二个子容器的宽度决定

我有一个容器

div

，其结构如下：

  <div class="container">
    <div class="title"> </div>
    <div class="content"></div>
    <div class="footer"></div>
  <div>

我希望容器的宽度取决于内容的宽度

我找到了一些解决方案，比如

但这不是我想要的。 您可以看到，如果我更改顺序，宽度仍然取决于第一个子项：

编辑

我可以添加一些上下文，我的程序中的

标题

很长，如果它被分成几行，我可以。 但是如果宽度取决于最宽的子项（

标题

）。将有太多空间放置

内容

。 我想这可能更有帮助。

试试这个

.container{
    display: table
}

 .container { position : relative ;} 
 .title { position :absolute ;} 

试试这个

 .container { position : relative ;} 
 .title { position :absolute ;} 

---

这是可能的，但只能通过使用

display:table

和相关属性，如

display:table caption

：

.title{
显示：表格标题；
标题侧：顶部；
背景：粉红色；
}
.集装箱{
位置：相对位置；
显示：表格；
}
.内容{
位置：相对位置；
显示：表格行；
背景：浅蓝色；
}
.页脚{
背景：浅绿色；
显示：表格标题；
标题侧：底部；
}

Lorem ipsum dolor sit amet，奉献精英。沃鲁帕提布斯，夸姆，雷姆。快去，快去！
本节确定结构的总宽度。
Lorem ipsum dolor sit amet，奉献精英。

这是可能的，但只能通过使用

显示：表格

和相关属性，如

显示：表格标题

：

.title{
显示：表格标题；
标题侧：顶部；
背景：粉红色；
}
.集装箱{
位置：相对位置；
显示：表格；
}
.内容{
位置：相对位置；
显示：表格行；
背景：浅蓝色；
}
.页脚{
背景：浅绿色；
显示：表格标题；
标题侧：底部；
}

Lorem ipsum dolor sit amet，奉献精英。沃鲁帕提布斯，夸姆，雷姆。快去，快去！
本节确定结构的总宽度。
Lorem ipsum dolor sit amet，奉献精英。

我要离开办公室了，因为中国的长城，我无法访问我家的堆栈溢出，明天我将检查所有评论和答案，很抱歉给您带来不便。在您的示例中，您已经定义了图像的宽度，因此如果我正确理解了问题，为什么不能定义

.container

的宽度？

.container

的宽度将是最大的子代，无论你做什么或子代的顺序，你都可以进行javascript攻击，但结果会很奇怪dangerous@jaunt实际上，在我的代码中，第二个div不是图像，而是一些文本代码。这些文本代码需要全球化，所以第二个div的宽度不能固定。@Marcos Pérez Gude是的，我知道容器将采用最宽的子容器，但我希望标题可以有几行，因为我的标题是一条长线，如果容器依赖于标题，那么容器中会有很多空间。我要离开办公室，由于中国长城网的原因，我无法访问我家的堆栈溢出，明天我将检查所有评论和答案，很抱歉给您带来不便。在您的示例中，您已经定义了图像的宽度，因此如果我正确理解了问题，为什么不能定义

.container

的宽度？

.container

的宽度将是最大的子代，无论你做什么或子代的顺序，你都可以进行javascript攻击，但结果会很奇怪dangerous@jaunt实际上，在我的代码中，第二个div不是图像，而是一些文本代码。这些文本代码需要全球化，所以第二个div的宽度不能固定。@Marcos Pérez Gude是的，我知道容器将采用最宽的子容器，但我希望标题可以有几行，因为我的标题是一条长线，如果容器依赖于标题，那么容器中会有很多空间。好主意。但我们如何确定内容的位置呢？我不知道标题的高度。这更复杂。正如我告诉你的，最后需要Javascript。使用javascript，您可以读取标题的高度，并将其作为内容顶部的边距应用。但我们如何确定内容的位置呢？我不知道标题的高度。这更复杂。正如我告诉你的，最后需要Javascript。使用javascript，您可以读取标题的高度，并将其作为内容顶部的边距应用