Question

我在容器中有两个正方形，它们使用transform：translate重叠，我想删除蓝色正方形右侧的填充，以使容器完全适合孩子的宽度。请参阅图片进行说明。

我尝试将容器的大小调整为90px，该宽度应为子项(50px + 50px - 10px)的宽度，但是当我这样做时，蓝色框将移至下一行。为什么这样做呢？我也尝试应用padding-right: 0，但没有任何改变。

.container {
  width: 110px;
  border: 1px solid black;
}

.box {
  height: 50px;
  width: 50px;
  display: inline-block;
}

.one {
  background: red;
}

.two {
  background: blue;
  transform: translate(-10px, 15%);
}

<div class="container">
  <div class="box one"></div>
  <div class="box two"></div>
</div>

我希望没有左右填充。

Answer 1

将position: absolute与top和left / right一起使用，不要忘记容器上的position: relative：

.container{
  width: 90px;
  border: 1px solid black;
  padding-right: 0;
  position: relative;
}

.box{
  height: 50px;
  width: 50px;
  display: inline-block;
}

.one{
  background: red; 
}

.two{
  background: blue;
  position: absolute;
  left: 40px;
  top: 15%;
}

<div class="container">
  <div class="box one"></div>
  <div class="box two"></div>
</div>

Answer 2

只需在第二个正方形上添加一个负的边距右边

.container {
  width: 94px;
  height: 57px;
  border: 1px solid black;
}

.box {
  height: 50px;
  width: 50px;
  display: inline-block;
}

.one {
  background: red;
}

.two {
  background: blue;
  margin-right: -10px;
  transform: translate(-10px, 15%);
}

<div class="container">
  <div class="box one"></div>
  <div class="box two"></div>
</div>

如何调整容器大小以适合其子容器的宽度

2 个答案: