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

您可以通过将子 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>

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

Answer 2

您只需要在父级的边缘补偿子级的 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>

css: 是否可以在父元素内部移动子元素，使父元素自动调整大小

css: is it possible to move the child elements inside the parent element so that the parent element is automatically resized

html

css

position

css-position