html - 仅使用 CSS 将父宽度设置为等于子总宽度？

Question

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

我想将宽度设置.parent为等于（每个宽度.child）*（总数.child）

我不想使用floats和width: auto;

我可以在calc()不使用 Javascript 的情况下做些什么吗？

**CSS：**

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

.child {
  height: 100px;
  width: 100px;
}

HTML：

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

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-flexforparent和inline-tablefor child。一切都是动态的。grandparent我通过添加另一个表格使表格可水平滚动overflow-x:scroll;：

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

Answer 2

如果您使用的是 Chrome，则可以使用max-width: fit-content

但其他主要浏览器尚不支持它。

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

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>

Answer 4

利用

{ width: max-content }

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

Answer 5

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

.parent {
    display: inline-block;
}

默认情况下， HTML 中display: block;的任何元素都将占据其父元素的整个宽度。在您的情况下，该.parent元素由于具有display: block;而占据了其父级的全部宽度。因此，通过设置display: inline-block;元素.parent将使其宽度变得等于其内容，在这种情况下是其.child元素所采用的总宽度。

Answer 6

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

你可以试试这个

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>