使用CSS，将父元素宽度设置为子元素总宽度相等？

Question

我不知道 .parent 元素将包含多少个 .child 元素，但我知道它们各自的宽度。

我想将 .parent 的宽度设置为 (每个 .child 的宽度) * (总共有多少个 .child)

我不想使用 floats 和 width: auto。

我能否使用 calc() 做些什么而不使用Javascript？

 .parent {
      height: 100%;
      width: calc({number of children} * {width of each child = 100px});
    }
    
    .child {
      height: 100px;
      width: 100px;
    }

    <div class="parent">
      <div class="child">a</div>
      <div class="child">b</div>
      <div class="child">c</div>
    </div>

- Kawd

---

使用 display:flex 是一个选项吗？ - Taha Paksu

这些“child”元素是水平对齐还是堆叠的？ - Fabrizio Calderan

子项是在旁边排列还是并排？ - DaniP

display:inline-block可以实现这个效果。 - Paulie_D

Answer 1

我知道现在有点晚了，但希望这可以帮助正在寻找类似解决方案的人：

<div class="parent" style="display: inline-flex">
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
        </div>

关键是使用inline-flex作为父元素，使用inline-table作为子元素。一切都是动态的。我通过添加另一个具有overflow-x:scroll;的grandparent使表格水平滚动：

<div class="grandparent" style="width: 300px; overflow-x: scroll; background: gray">
        <div class="parent" style="display: inline-flex">
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
        </div>
    </div>

- sooon

---

谢谢，它非常好用！我只需要在Chrome上使用，所以没有在其他地方测试。 - Krzysztof Sztompka

谢谢，使用 flex-direction:column 对我很有帮助，但正如你所说，inline-flex 才是解决这个问题的关键。 - Chinthana

太棒了，这在我的情况下可以直接替代 display: flex。 - Alexander Ivanov

嗯，看起来一旦父级的父级是flex就会出错。 - dakt

Answer 2

如果您正在使用Chrome，您可以使用max-width: fit-content

然而，其他主要浏览器目前还不支持

更新: 正如Kasper在评论中指出的那样，大多数浏览器现在已经支持max-width: fit-content （尽管在Firefox的情况下需要使用供应商前缀）

- Pranav

---

使用Firefox的供应商前缀，现在情况看起来非常不错：max-width: fit-content，max-width: -moz-fit-content。 - Kaspar Etter

这应该被添加到父 div 中，对吗？但是它对我不起作用！@Pranav - Akhila

现在默认在Firefox中工作，因此这似乎是更正确的答案，因为它是最简单的。 - RobKohr

Answer 3

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  }

.parent {
  height: 100%;
  display:inline-block;
  background:#bada55;
  font-size:0; /* clear whitespace*/
}

.child {
  height: 100px;
  width: 100px;
  border:1px solid red;
  display:inline-block;
}

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

- Paulie_D

---

这里的诀窍是将 display: inline-block 设置为父元素，而不仅仅是子元素。对我有用，所以我点赞以取消反对 :-) - Just a student

Answer 4

用途

{ width: max-content }

在父节点上应该可以正常工作。这也是一个实验性的功能。（我不知道为什么其他人不使用这种方法。）

- Liu CZ

Answer 5

您可以将display: inline-block;设置为.parent元素，使其宽度等于其.child元素所占的总宽度。

.parent {
    display: inline-block;
}

无论在HTML中哪些元素默认使用display: block;，都会占据其父元素的全部宽度。在您的情况下，由于.parent元素具有display: block;，因此它占据了其父元素的全部宽度。因此，将.parent元素设置为display: inline-block;将使其宽度变为其内容的宽度，这在本例中是其.child元素所占据的总宽度。请注意保留HTML标签。

- arafatgazi

Answer 6

* {
      flex-grow: 1;
      flex-basis: 0;
      width: fit-content;
  }

you can try this

- Nguyễn Dương

---

如果您使用 *，则会将此属性设置为所有元素...这是不正确的。 - Sfili_81

Answer 7

.parent{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.child {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1; 
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
}

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>

</div>

- Manjunatha N

---

请在您的代码中提供一些解释。 - Partho63