Question

我正在尝试根据子容器调整容器div的大小，这可以包裹多行。如果孩子（蓝色方框）确实换行，则容器的宽度为100％（黑色边框，下方）。我想避免这种情况，并将容器设置为其任何子容器的最大宽度。

.container {
  border: 1px solid black;
  width: fit-content;
}
.child {
  width: 500px;
  height: 70px;
  background-color: blue;
  display: inline-block;
  margin: 5px;
}

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
</div>

有人可以帮忙吗？我知道这可以通过javascript完成，但我更喜欢仅使用css的解决方案，因为似乎如此简单。谢谢！

更新这是一个显示它应该如何显示的片段，但在这种情况下，它会阻止.child div显示为内联（我希望在有空间时允许）：

.container {
  border: 1px solid black;
  width: min-content;
}
.child {
  width: 500px;
  height: 70px;
  background-color: blue;
  display: inline-block;
  margin: 5px;
}

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
</div>

Answer 1

您可以尝试使用容器元素

.container {
    border: 1px solid black;
    display: inline-block;
    width: min-content;
}

Shrinkwrap div包装内容

1 个答案: