如何使父元素 div 自动调整为其子元素 div 的宽度

Question

我想让父级div的宽度只与子级div的宽度相同。自动宽度会使父级div适应整个屏幕。由于子级div的内容不同，它们的宽度也不同，因此我需要父级div相应地进行调整。

<div style='width:auto;'>
  <div style="width: 135px; float: left;">
    <h4 style="padding-right: 5px; padding-left: 15px;">Column1</h4>
    <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;">
      <dd style="white-space: nowrap;">1</dd>
      <dd style="white-space: nowrap;">2</dd>
    </dl>

    <h4 style="padding-right: 5px; padding-left: 15px;">Column1</h4>
    <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;">
      <dd style="white-space: nowrap;">1</dd>
      <dd style="white-space: nowrap;">2</dd>
    </dl>
  </div>

  <div style="width: 135px; float: right;">
    <h4 style="padding-right: 5px; padding-left: 10px;">Column2</h4>
    <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;">
      <dd style="white-space: nowrap;">1</dd>
      <dd style="white-space: nowrap;">2</dd>
      <dd style="white-space: nowrap;">3</dd>
    </dl>
  </div>
</div>

- bradley4

Answer 1

你的内部<div>元素应该都使用float:left。Div会自动调整大小以适应其容器宽度的100%。尝试在容器div上使用display:inline-block而不是width:auto。或者可能float:left容器，然后应用overflow:auto。具体取决于你想要什么。

- Madbreaks

---

谢谢Madbreaks。让两个左浮动是我没有尝试过的事情。 - bradley4

溢出自动为我完成了任务。 - rustypaper

"display:inline-block" 是一种不错的方式，但如果你想使用百分比值来设置子元素的宽度，它将无法按照你的期望工作。 有什么办法可以让它也能与百分比值一起正常工作呢？ - Mohsen Haeri

@MohsenHaeri 你不行。子元素的百分比宽度是根据父元素的宽度计算的。想一想，如果我有两个子元素，它们的宽度都是 50%，那么父元素有多宽呢？ - Madbreaks

@Madbreaks 我知道。这就是为什么我正在寻找一种方法来解决这个问题。虽然有Js的方法，但我无法找到纯CSS的方法。无论如何，感谢您的关注。 - Mohsen Haeri

Answer 2

这是使父级 div 继承其子级宽度最简单的方法。

.container-fluid {
  border: 1px solid black;
  /*the needed css class to make your parent div responsive to it's children's max-width
  */
  width: max-content
}
.wrapper {
  border: 1px solid red;
  width: 300px
}

<div class="container-fluid">
  <div class="wrapper">xxx</div>
</div>

我希望有人能发现这很有用。

- Riadh Bg

---

width: max-content 真的是一个简单的一行代码解决方案。这可能是最好的答案。 - Max Voisard

很高兴能帮到你 :) - Riadh Bg

Answer 3

父级 div（我假设是最外层的 div）采用 display: block，将填充其容器（在本例中为 body）中所有可用的宽度。使用不同的显示类型——inline-block 可能是你想要的：

http://jsfiddle.net/a78xy/

- Explosion Pills

Answer 4

我曾经遇到这个问题，一直在设置父组件的宽度。后来无意中发现了 CSS 的 width: fit-content；

以下是一个示例：

.outerContainer {
  width: 300px;
  height: 300px;
  background: gray;
}

.innerContainer {
  width: fit-content;
  border: 3px solid red;
}

.item {
  width: 200px;
  height: 200px;
  padding: 10px;
  background: blue;
}
  

<div class="outerContainer">
  <div class="innerContainer">
    <div class="item">
    </div>
  </div>
</div>

在这个例子中，具有红色背景的innerContainer div（即适应item容器内容的div）。outerContainer div 是用来显示对比效果的。

- Prasanna

---

请注意检查此功能的支持情况，以确定是否适用于您的项目 https://caniuse.com/?search=fit-content - Raphaël Balet