html - 行内 block 元素的匿名文本 block 宽度

Question

我正在尝试使容器 div 的宽度动态折叠到其内联 block 内容上。据我所知，这是不可能的 9.4.2 Inline formatting contexts

In general, the left edge of a line box touches the left edge of its containing block and the right edge touches the right edge of its containing block. However, floating boxes may come between the containing block edge and the line box edge. Thus, although line boxes in the same inline formatting context generally have the same width (that of the containing block), they may vary in width if available horizontal space is reduced due to floats.

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

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

var demoContainer = d3.select('#demoContainer').style('width', '200px');
function 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')
	.each('end', tick);
};
tick();

#htmlDiv {
      font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
      font-size: 12px;
      outline: solid 1px black;
      background-color: rgba(0, 0, 0, 0.25);
      display: inline-block;
      box-sizing: border-box;
    }

    .container,
    #bubble-wrapper {
      height: auto;
      position: relative;
      display: inline-block;
      margin: 5px;
      background-color: rgba(0, 38, 255, 0.25);
      outline: solid 1px white;
      text-align: left;
    }

    .bubbles {
      color: #ccc;
    }

    .select-bubbles,
    .bubbles {
      padding: 5px;
      margin: 5px;
      outline: solid 1px white;
      background-color: rgb(114, 114, 114);
      width: 100px;
      display: inline-block;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="demoContainer" style="outline: solid 3px red; padding: 10px">
    <div id="htmlDiv">
      <div class="container">
        display: inline-block;
        <br>position: relative;
        <br />
        <div class="select-bubbles">
          inline-block
        </div>
      </div>
      <br>
      <div id="bubble-wrapper">
        display: inline-block;
        <br>position: relative;
        <br>
        <div class="bubbles bubble1">
          inline-block
        </div>
        <div class="bubbles bubble2">
          inline-block
        </div>
        <div class="bubbles bubble2">
          inline-block
        </div>
      </div>
    </div>
  </div>

但我需要容器来收缩包装内部 div...

这很好

这也是

但这不是我要找的...

我是否正确理解了规范？如果是，是否有办法实现我正在寻找的内容？

更新正如@Alohci 所指出的，更重要的引用是

10.3.9 'Inline-block', non-replaced elements in normal flow

If 'width' is 'auto', the used value is the shrink-to-fit width as for floating elements.

Answer 1

尽管恕我直言，您没有引用关键部分，但您已经正确理解了规范的结果。那是 shrink-to-fit algorithm ，它说:

... calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. ... Thirdly, find the available width: in this case, this is the width of the containing block minus the used values of 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.

Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).

它解析为可用宽度，而不是“不能收缩包装”情况下的最小宽度。

不幸的是，CSS 广泛使用了这种算法，因此 float 框等替代布局也存在同样的问题。