Html 内联块元素的匿名文本块宽度

我试图使容器div的宽度动态折叠到其内联块内容上。据我所知，这是不可能的

通常，线框的左边缘接触其包含块的左边缘，右边缘接触其包含块的右边缘。但是，浮动框可能位于包含块边缘和线框边缘之间。因此，尽管同一内联格式上下文中的行框通常具有相同的宽度（包含块的宽度），但如果可用的水平空间由于浮动而减少，它们的宽度可能会有所不同

问题是匿名文本块假定其容器的宽度

我希望内部元素能像这样响应宽度

var demoContainer=d3.选择（'demoContainer'）.style（'width'，'200px'）；
函数tick（）{
demoContainer.transition（）.duration（3000）.style（'width'，'300px'））
.transition（）.duration（2000）.style（'width'，'300px'））
.transition（）.duration（3000）.style（'width'，'550px'））
.transition（）.duration（3000）.style（'width'，'300px'）
.transition（）.duration（2000）.style（'width'，'300px'））
.transition（）.duration（3000）.style（'width'，'100px'）
.每个（'结束'，勾选）；
};
勾选（）
#htmlDiv{
字体系列：Helvetica Neue、Helvetica、Segoe UI、Arial、freesans、sans serif；
字体大小：12px；
外形：实心1px黑色；
背景色：rgba（0,0,0,0.25）；
显示：内联块；
框大小：边框框；
}
.货柜，
#气泡包装器{
高度：自动；
位置：相对位置；
显示：内联块；
保证金：5px；
背景色：rgba（0,38,255,0.25）；
外形：纯色1px白色；
文本对齐：左对齐；
}
.泡泡{
颜色：#ccc；
}
.选择气泡，
.泡泡{
填充物：5px；
保证金：5px；
外形：纯色1px白色；
背景色：rgb（114114114）；
宽度：100px；
显示：内联块；
}

显示：内联块；

位置：相对位置；


内联块


显示：内联块；

位置：相对位置；


内联块
内联块
内联块
它并不完美，但您可以使用以下功能：

将此添加到CSS中：

#htmlDiv * { box-sizing: border-box; }

该属性包含元素总宽度中的填充和边框。
您已经正确理解了规范的结果，尽管您没有引用关键部分。这就是答案，上面写着：

。。。通过格式化内容（不带格式）计算首选宽度
除发生显式换行以外的换行，以及
计算首选的最小宽度，例如，通过尝试所有可能的方法
换行符。。。第三，找到可用宽度：在这种情况下，这个
包含块的宽度减去使用的
“左边距”、“左边框宽度”、“左填充”、“右填充”，
“右边框宽度”、“右边框宽度”以及任何相关
滚动条

然后收缩至配合宽度为：最小（最大）（首选最小宽度，
可用宽度），首选宽度）

解析为可用宽度，而不是“不能收缩包装”案例的最小宽度

不幸的是，CSS广泛使用此算法，因此浮动框等其他布局也存在同样的问题。
在我的示例中，您放置的第三个图像不会显示，只有水平方向的所有div或垂直方向的所有div。对不起，如果是我不懂好的，不是你想要的那么顺便问一下，这是否意味着不可能按照我的要求去做？