Question

我试图让容器div的宽度动态地折叠到其内联块内容上。根据我的判断，每9.4.2 Inline formatting contexts

这是不可能的

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

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

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

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 ...

这很好 enter image description here
这个是这样的
但这不是我要找的......

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

更新正如@Alohci指出的那样，更重要的参考是

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

如果'width'是'auto'，则使用的值是收缩到适合的宽度浮动元素。

Answer 1

您已正确理解规范的后果，但恕我直言，您没有引用关键部分。这是shrink-to-fit algorithm，其中包含：

...通过格式化内容而不计算首选宽度   除了发生显式换行之外的其他线路也是如此   计算优选的最小宽度，例如，通过尝试所有可能的   换行。 ......第三，找到可用的宽度：在这种情况下，这个   是包含块的宽度减去使用的值   ＆＃39; margin-left＆＃39;，＆＃39; border-left-width＆＃39;，＆＃39; padding-left＆＃39;，＆＃39; padding-right＆＃39;，   ＆＃39; border-right-width＆＃39;，＆＃39; margin-right＆＃39;，以及任何相关的宽度   滚动条。

然后收缩配合宽度为：min（max（首选最小宽度，   可用宽度），首选宽度）。

哪个解决了可用的宽度，而不是你的＆＃34;不能收缩包装的最小宽度＆＃34;情况下。

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

Answer 2

这不完美，但你可以用这个工作：fiddle

将此添加到您的CSS：

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

该属性在元素的总宽度中包含填充和边框。

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

2 个答案: