为什么具有负边距的连续元素对内容流的影响与具有负边距的单个元素不同？
下面的代码示例结果的屏幕截图： 
我在示例中有 3 列项目：
- 第一列包含 4 个具有正常内容流的框。
- 第二列包含相同的框，但其中一个框具有类
.negative，其中 使用负边距和填充放大元素。 注意 列与第一列的高度相同。 - 第三列包含具有相同
.negative类的 2 个连续元素。 请注意下面的内容流发生了变化，并且该列现在具有不同的高度！
我如何避免内容流中的这种变化，拥有 .negative 类而不影响其他元素，是什么原因导致的？
代码示例：
.box {
height: 20px;
background: gray;
border: 5px solid rgba(0, 0, 0, 0.5);
}
.negative {
position: relative;
margin: -5px;
padding: 5px;
}
.container {
display: flex;
}
.container > * {
width: 0;
flex-grow: 1;
}<div class="container">
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div>
<div class="box"></div>
<div class="box negative"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div>
<div class="box"></div>
<div class="box negative"></div>
<div class="box negative"></div>
<div class="box"></div>
</div>
</div>Screenshot of Result of code-example below:
I have 3 columns of items in the example:
- The first column contains 4 boxes with normal content flow.
- The second column contains the same boxes but one box has the class
.negativewhich
enlarges the element with negative margin and padding. Notice the
column has the same height as the first one. - The third column contains 2 successive elements with the same
.negativeclass. Notice the content flow below changed and the column now has a different height!
How can i avoid this change in content flow, to have a .negative class without affecting other elements and what causes this?
Code Example:
.box {
height: 20px;
background: gray;
border: 5px solid rgba(0, 0, 0, 0.5);
}
.negative {
position: relative;
margin: -5px;
padding: 5px;
}
.container {
display: flex;
}
.container > * {
width: 0;
flex-grow: 1;
}<div class="container">
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div>
<div class="box"></div>
<div class="box negative"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div>
<div class="box"></div>
<div class="box negative"></div>
<div class="box negative"></div>
<div class="box"></div>
</div>
</div>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这是使用相对定位的
.negative类的工作解决方案，但我不知道是什么导致了连续元素的问题。重要的是要知道，并非所有边距都以相同的方式工作，因此我们在这里使用 2 个带边距的方向和 2 个带相对位置的方向。
Here is a working solution for the
.negativeclass using relative positioning, but i dont know what causes the problem with successive elements.Important to know is that not all margins work the same way, so we are using 2 directions with margins and 2 directions with relative positions here.