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

时间:2019-05-10 18:00:00

标签: html css

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

Picture of issue

我尝试将容器的大小调整为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>

我希望没有左右填充。

2 个答案:

答案 0 :(得分:0)

position: absolutetopleft / 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>

答案 1 :(得分:0)

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

.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>