Html 拉伸固定到底部父div到div子div'；s宽度

因此，我有一个主容器，显示如下：

我希望能够使父div适应它接收到的子div的数量。假设我们删除了div2。结果应该是这样的：

相反，父div不会延伸到div子div的宽度

这是我的密码：

HTML:

  <div class="main-container">
    <!-- Card container -->
    <div class="card-container">
      <div class="card">div1</div>
      <div class="card">div2</div>
      <div class="card">div3</div>
    </div>
    <!-- Footer container -->
    <div class="footer">i am a footer</div>
  </div>

我做错了什么？我尝试了显示：内联块解决方案，但由于父div必须固定在底部，因此我没有看到期望的结果

任何帮助都是宝贵的

提前谢谢。

试试这个

您可以尝试删除一张

.card

，然后单击此处查看出现的情况

CSS

.main-container {
  position: fixed;
  margin: 0 auto;
  left: 50%;
  bottom: 0;
  box-shadow: 0 0 15px #B3B3B3;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  text-align:center;
  display: inline-block;
  transform: translateX(-50%);
}

.footer {
  color: #FFFFFF;
  background: #0095D3;
  height: 45px;
  width: 100%;
}
.card {
  width:100px;
  height:105px;
  display: inline-block;
}

HTML

<div class="main-container">
    <div class="card">div1</div>
    <div class="card">div2</div>
    <div class="card">div3</div>
    <div class="footer">i am a footer</div>
</div>

第一组
第二组
第三组
我是一只脚

给你：

您不需要使用

显示：内联块

我不使用HTML，简化了一些CSS:

.card container

和

.footer

不需要

float:left和<代码>宽度：100%。它们都是块级元素，因此它们将占据100%的宽度，并且不需要任何东西来包裹它们

在
.main container
上，不能设置
边距：0自动和
位置：固定<代码>位置：固定取消通过边距居中的功能<代码>左：0和<代码>右侧：0正在拉伸主容器的大小，因此需要移除这些容器<代码>宽度：100%和
最大宽度：400px
试图解决宽度问题，但这不允许根据内容调整大小

相反，您需要设置
left:50%（将元素的左边缘放置在父元素宽度的50%，在本例中为视口宽度），然后
变换：平移（-50%）
将元素向左移回其宽度的50%。从而将元素带到窗口/视口的中心

现在，如果移除其中一张“卡”，它将调整“主容器”的大小，同时保持所有内容固定在底部和中心

.main-container {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 0 15px #B3B3B3;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  text-align: center;
}

.card-container {
  color: #3B3D3D;
  height: 105px;
}

.card {
  width: 100px;
  float: left;
}

.footer {
  color: #FFFFFF;
  background: #0095D3;
  height: 45px;
}

编辑：根据您的新信息（关于：增加的宽度或添加的“卡片”），我发现问题在于
主容器的左侧位置。当您将元素定位50%且其宽度超过父元素的50%时，它将进入父div的右侧，并获得堆叠。要解决这个问题，您可以删除
float:left.card
上编码>并添加
显示：flex在
.card container
上。这将允许您增加“卡”的宽度，同时防止它们堆叠

我在这里更新了代码：

}
这正是我需要的，非常感谢Nenad谢谢你的代码neptune，作为Nenad的代码，这正是我想要的。事实上，当我再次尝试你的代码时，我注意到如果我的卡片宽度超过171像素，我就无法达到同样的效果，因为它们开始相互堆叠。@nenad vracar代码也是如此。试试我用flexbox而不是floats添加的新代码。非常感谢海王星，这正好完成了任务。
.main-container {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 0 15px #B3B3B3;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  text-align: center;
}

.card-container {
  color: #3B3D3D;
  height: 105px;
}

.card {
  width: 100px;
  float: left;
}

.footer {
  color: #FFFFFF;
  background: #0095D3;
  height: 45px;
}

.main-container {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 0 15px #B3B3B3;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  text-align: center;
}

.card-container {
  color: #3B3D3D;
  height: 105px;
  display: flex;
}

.card {
  width: 100px;
  //  float: left;
}

.footer {
  color: #FFFFFF;
  background: #0095D3;
  height: 45px;