javascript - 使父 div 的宽度等于最宽的子元素/div

Question

据我了解，如果未定义 div 的宽度和高度属性，则父 div 将等于排列的子元素宽度和高度属性共同(分别)相加的结果。

我目前的设置是这样的:

<div> //container
  <div> //list of each element
    <div> // element 1
      ... children comprised of on SVG and a few other divs
    </div>
    <div> // element 2
      ... children comprised of on SVG and a few other divs
    </div>
    <div> // element 3
      ... children comprised of on SVG and a few other divs
    </div>
    …etc…
  </div>
</div>

我的问题是元素 div 的 width 没有正确设置(或更新)。 div 的宽度应该是子 SVG 的宽度(因为它是最宽的)，div 的高度应该是子 div(其中 2 个)的高度和 SVG 的高度。

这是 fiddle的例子。您会注意到条形示例被 chop 了。这个 div 的计算宽度为 300，尽管它的 SVG 更大(拖动以查看剩余部分)

JQ-UI 正在发挥作用，因此在用户操纵表示的大小后，其他人将重新呈现自己。如果我们能弄清楚 div 渲染到 300px 的原因，那么它也会修复重新渲染，因为它将基于其子元素。

看来问题也可能与 SVG 本身有关。我没有在 SVG 上定义宽度和高度属性，而是在 CSS 上定义。如果我在调整大小时操纵 SVG 宽度属性，它似乎可以工作，但我仍然不确定为什么不计算 SVG 的宽度然后将其放入 div。

Answer 1

当 <div>没有定义它的宽度和高度，这两个属性都设置为 auto .

当一个 block 级元素时，像<div> , 宽度为 auto ，它将扩展到其包含元素中的可用水平空间。如果它的 child 比规范说的更宽，他们应该突出，但他们不会影响 parent 的宽度。 (当时有一个严重的 IE 错误没有遵循此规范，这使得 float 布局非常难以实现)。

当一个 block 级元素时，像<div> , 高度为 auto，它将垂直扩展以包含其在文档流中的所有子项。

您需要更改默认行为。对于您要扩展的每个父项及其每个子项，您需要申请 display:inline-block;

 div.parent, div.child1, div.child2{
       display:inline-block;
 }