确定父母的尺寸时如何忽略某个元素

Question

我有一个div，其宽度仅与它的内容一样宽，但是我正在尝试制作它，以便在确定div的大小时忽略某个元素。

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

我要使其父div的宽度为10px

根据these answers的建议，我尝试将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>

Answer 2

如果只希望其中一个div具有所需的结果，并且希望具有.ignore类的div具有更大的宽度。您可以使用以下代码。

HTML

<div id="parent">
  <div class="ignore">Ignore</div>
  <div style="width: 60px">Normal</div>
  <div></div>
</div>

CSS

#parent {
 background:red;
 padding:10px;
 overflow:visible;
 max-width:60px;
 }

#parent > div {
  height:20px;
  background:blue;
  margin-bottom:10px;
}

.ignore {
  width:100px;
 }

我已经使用了overflow：visible属性并将其最大宽度设置为60px（这是没有.ignore类的所有div的宽度。），并将其设置为具有.ignore类的div的宽度由我选择。

这是codepen链接： https://codepen.io/anon/pen/NmoVxw

希望这会有所帮助。谢谢

Answer 3

另一个想法，改变比例而不是宽度。

#parent {
  background: red;
  padding: 5px;
  display: inline-block;
}

#parent>div {
  height: 20px;
  background: blue;
  margin-bottom: 5px;
}

.ignore {
  transform-origin: left;
  animation: change 2s linear infinite alternate;
}

@keyframes change {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(2);
  }
}

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

Answer 4

#parent {
  position: relative;
  display: inline-block;
}
.ignore {
  position: absolute;
}

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

这会神奇。告诉我是否可行；