CSS在确定父级大小时忽略一个元素

Question

基本上，我怎样才能做到这一点：

<div id="outerDiv">
    <div class="ignoreWidth" style="width: 20px;">20px</div>
    <div style="width: 4px;">4px</div>
    <div style="width: 8px;">8px</div>
</div>
<!-- outerDiv.style.width == 8px -->

没有硬编码外部div的宽度。

编辑： position: absolute用于修复宽度问题，但随后所有其他元素都在其下移动。有没有办法避免没有填充？

Answer 1

为outerDiv position制作css relative属性，为position ignoreWidth制作absolute并设置为0，

这应该将第一个内部div放在外部div的左上角并使用它自己的高度和宽度属性

在此页面的css文件中：

#outerDiv {
  position:relative;
}
.ignoreWidth {
  position:absolute;
  top: 0;
  left: 0;
}

Answer 2

您可以使用

将其从文档流程中删除

.ignoreWidth{
  position:absolute;
}

  

https://developer.mozilla.org/en-US/docs/Web/CSS/position

Answer 3

您可以使用Javascript将outerDiv的宽度设置为等于渲染时第二个最宽子div的宽度。