Html css：是否可以在父元素内移动子元素，以便自动调整父元素的大小

您知道通过在父块内移动子块（使用

位置：相对；左：xxx；

或

变换：平移（）

），是否可以不“手动”设置父块的确切大小

我举了一个例子-您可以看到，移动的块超出了父块的底部边界，并且没有到达父块的右边界

但是我希望这些元素能够完全适合父块

我可以通过手动设置坐标和大小来完成，但只能通过css自动完成吗

*{
框大小：边框框；
}
.组{
显示：内联块；
保证金：0；
填充：0；
字号：0；
边框：1px纯黑；
}
.集团部{
字体大小：20px；
显示：内联块；
}
.group div:非（.main）{
宽度：128px；
高度：128px；
边框：1px纯红；
背景：石灰；
}
梅因先生{
转换：转换（-20px，20px）；
宽度：192px；
高度：192px；
边框：1px纯蓝色；
背景：橙色；

1.
2.
3.

您可以通过将子div设置为浮动，然后移动最后一个带边距的div来实现这一点

.group{
显示：内联块；
保证金：0；
填充：0；
字号：0；
边框：1px纯黑；
}
.集团部{
字体大小：20px；
显示：内联块；
}
.group div:非（.main）{
宽度：128px；
高度：128px；
浮动：左；
边框：1px纯红；
背景：石灰；
}
梅因先生{
边缘顶部：20px；
左边距：-20px；
宽度：192px；
高度：192px；
浮动：左；
边框：1px纯蓝色；
背景：橙色；
}

1.
2.
3.

您只需补偿父级页边距中子级的

翻译

，从而消除任何间隙

注意：我自由地清理了代码，消除了不必要的值，并且使解决方案更加清晰。希望它对您有用

编辑：此解决方案不需要

float

，这可能是一个问题。此外，您可以使用

position:relative

而不是

transform

，而不会出现任何问题

div{
显示：表格；
外形：1px纯黑；
/*与要补偿的变换量相同*/
右边距：-20px；
边缘底部：20px；
}
div>div{
显示：内联块；
宽度：128px；
高度：128px；
背景：浅绿色；
}
div>div：最后一个孩子{
宽度：192px；
高度：192px；
/*如果愿意，请使用此选项并删除变换：
位置：相对位置；
右：20px；
顶部：20px；
*/
转换：转换（-20px，20px）；
背景：橙色；
}

1.
2.
3.

用边距移动它？@Temani Afif，否，否，我需要父块的边界严格接触子块，没有任何间隙