css:是否可以将子元素移动到父元素中，以便自动调整父元素的大小

Question

你知道是否有可能不"手动"；通过在父块内移动子块(使用position: relative; left: xxx;或transform: translate()(来设置父块的确切大小？

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

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

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

* {
box-sizing: border-box;
}

.group {
display: inline-block;

margin: 0;
padding: 0;
font-size: 0;

border: 1px solid black;
}

.group div {
font-size:  20px;
display: inline-block;
}

.group div:not(.main) {
width:  128px;
height: 128px;

border: 1px solid red;
background: lime;
}

.main {
transform: translate(-20px, 20px);

width:  192px;
height: 192px;

border: 1px solid blue;
background: orange;

<div class = 'group'>
<div>1</div>
<div>2</div>
<div class = 'main'>3</div>
</div>

Answer 1

您只需要在父级的边距中补偿子级的translate，从而消除任何间隙。

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

编辑：此解决方案不需要float，这可能是一个问题。此外，您可以使用position: relative而不是transform，而不会出现任何问题。

div {
display: table;
outline: 1px solid black;
/* same amount as the transform to compensate */
margin-right: -20px;
margin-bottom: 20px;
}
div > div {
display: inline-block;
width: 128px;
height: 128px;
background: lightgreen;
}
div > div:last-child {
width: 192px;
height: 192px;

/* use this and delete the transform if you like:
position: relative;
right: 20px;
top: 20px;    
*/

transform: translate(-20px, 20px);
background: orange;
}

<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Answer 2

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

.group {
display: inline-block;
margin: 0;
padding: 0;
font-size: 0;
border: 1px solid black;
}
.group div {
font-size:  20px;
display: inline-block;
}
.group div:not(.main) {
width: 128px;
height: 128px;
float: left;
border: 1px solid red;
background: lime;
}
.main {
margin-top: 20px;
margin-left: -20px;

width:  192px;
height: 192px;
float: left;
border: 1px solid blue;
background: orange;
}

<div class = 'group'>
<div>1</div>
<div>2</div>
<div class = 'main'>3</div>
</div>

请注意，这只是您的确切问题的解决方案，这意味着它只适合右侧和底部。