确定父母的大小时如何忽略某个元素 [英] How to ignore a certain element when determining parent's size

问题描述

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

< pre class = lang-html prettyprint-override> < div id = parent>
< div class = ignore style = width：20px>< / div>
< div style = width：10px>< / div>
< / div>


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

由这些答案，我尝试将 position：absolute 添加到 .ignore ，但这将其从文档流中删除，不是我想要的有什么方法可以将 .ignore 保留在文档流中，但是会超过10px宽度溢出？

这就是我想要的：

不是这样的：

解决方案

添加大设置宽度时， ignore 元素的负边距。

  #parent {background：red;内边距：5px; display：inline-block;}＃parent> div {height：20px;背景：蓝色； margin-bottom：5px;}。ignore {margin-right：-500px; / *演示* /动画：更改2s线性无限交替；} @关键帧将{从{width：10px;}更改为{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;内边距：5px; display：inline-block;}＃parent> div {height：20px;背景：蓝色； margin-bottom：5px;}。忽略{/ *以说明* /动画：更改2s线性无限交替；} @关键帧将{从{margin-right：-10px;}更改为{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>  

I have a div which is only as wide as its contents, but I'm trying to make it so that a certain element is ignored when determining the div's size.

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

I want to make it so that the width of the parent div is 10px

As suggested by these answers, I tried adding position:absolute to .ignore, but this takes it out of the document flow, which is not what I want. Is there some way to keep .ignore in the document flow, but have it overflow past the 10px width?

This is what I want:

Not this:

解决方案

Add a big negative margin to the ignore element while setting the width.

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

Or use only the negative margin to set the width. Note that the final width will be the sum of the biggest width inside the parent + the margin you set (not only the margin)

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

这篇关于确定父母的大小时如何忽略某个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！