确定父级大小时如何忽略某个元素

Question

我有一个仅与其内容一样宽的 div，但我试图使其在确定 div 的大小时忽略某个元素。

<div id="parent">
    <div class="ignore" style="width: 20px"></div>
    <div style="width: 10px"></div>
</div>

我想让它的父 div 的宽度为 10px

正如这些答案所建议的那样，我尝试添加position:absolute到.ignore，但这会将其从文档流中移除，这不是我想要的。有没有办法保持.ignore文档流，但它是否溢出超过 10px 宽度？

这就是我要的：

不是这个：

Answer 1

ignore在设置宽度时为元素添加一个大的负边距。

#parent {
  background:red;
  padding:5px;
  display:inline-block;
}
#parent > div {
  height:20px;
  background:blue;
  margin-bottom:5px;
}

.ignore {
  margin-right:-500px;
  
  /*to illustrate*/
  animation:change 2s linear infinite alternate;
}

@keyframes change {
  from {width:10px;}
  to {width:100px;}
}

<div id="parent">
    <div class="ignore"></div>
    <div style="width: 30px"></div>
    <div></div>
    <div style="width: 40px"></div>
    <div class="ignore"></div>
    <div style="width: 30px"></div>
</div>

或者仅使用负边距来设置宽度。请注意，最终宽度将是父级内部最大宽度的总和 + 您设置的边距（不仅是边距）

#parent {
  background:red;
  padding:5px;
  display:inline-block;
}
#parent > div {
  height:20px;
  background:blue;
  margin-bottom:5px;
}

.ignore {
  /*to illustrate*/
  animation:change 2s linear infinite alternate;
}

@keyframes change {
  from {margin-right:-10px;}
  to {margin-right:-100px;}
}

<div id="parent">
    <div class="ignore"></div>
    <div style="width: 30px"></div>
    <div></div>
    <div style="width: 40px"></div>
    <div class="ignore"></div>
    <div style="width: 30px"></div>
</div>