Question

所以，我有一个主容器，显示如下：

我希望能够将父div调整为它收到的孩子的数量。让我们说我们删除div2。结果应该是这样的：

相反，父div不会延伸到div子的宽度</ p>

这是我的代码：

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>

CSS：

.main-container {
  position: fixed;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 400px;
  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;
  float: left;
  width: 100%;
}
.footer {
  color: #FFFFFF;
  background: #0095D3;
  height: 45px;
  float: left;
  width: 100%;
}
.card {
  width:100px;
  float:left;
}

我在这里做错了什么？我已经尝试了 display：inline-block; 解决方案，但由于父div必须固定在底部，我没有看到所需的结果。

任何帮助都是宝贵的。

提前致谢。

Answer 1

试试这个https://jsfiddle.net/2Lzo9vfc/136/

您可以尝试在点击时移除一个.card，看看这里有什么问题https://jsfiddle.net/2Lzo9vfc/138/

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

Answer 2

在这里：http://codepen.io/n3ptun3/pen/PPgWNb

您无需使用display: inline-block。

我单独留下了您的HTML，并简化了部分CSS：.card-container和.footer不需要float: left;和width: 100%;。它们都是块级元素，因此它们占据宽度的100％，并且它们不需要任何东西来包裹它们。

在.main-container上，您无法设置margin: 0 auto;和position: fixed;。 position: fixed;删除了通过边距居中的功能。 left: 0;和right: 0;正在扩展主容器的大小，因此需要将其删除。 width: 100%;和max-width: 400px;正在尝试修复宽度问题，但这不允许根据内容调整大小。

相反，您需要设置left: 50%;（将元素的左边缘放置在父元素宽度的50％处，即在这种情况下为视口宽度），然后transform: translate(-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;
}

编辑：根据您的新信息（re：增加的宽度或添加“卡片”），我发现问题出在.main-container左侧的位置。当您将元素放置50％并且其宽度超过父元素的50％时，它将运行到父div的右侧，然后您将获得堆叠。要解决此问题，您可以删除float: left;上的.card并在display: flex;上添加.card-container。这将允许您增加“卡”的宽度，同时防止它们堆叠。

我在这里更新了代码：http://codepen.io/n3ptun3/pen/PPgWNb

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

}

拉伸固定到底部父div以div子的宽度

2 个答案: