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

Posted 2023-03-06

【中文标题】仅使用 CSS 将父宽度设置为等于子总宽度？

【英文标题】：Set Parent Width equal to Children Total Width using only CSS?

【发布时间】：2015-02-07 13:42:51

【问题描述】：

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

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

我不想使用floats 和width: auto;

我可以在不使用 javascript 的情况下使用 calc() 做一些事情吗？

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

【问题讨论】：

是否使用display:flex 选项？

那些child元素是水平对齐的还是堆叠的？

子项放在一边……并排？

display:inline-block 会这样做。

【参考方案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 用于parent，将inline-table 用于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>

【讨论】：

感谢它很好用！我只需要 chrome，因此没有在其他任何地方测试

感谢 flex-direction:column 对我有用，但正如你所说，inline-flex 是解决这个问题的诀窍。

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

嗯，好像一旦父母的父母是弹性的，它就会打破

【参考方案2】：

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

但其他主流浏览器使用的是not yet supported。

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

【讨论】：

使用 Firefox 的供应商前缀，现在的情况看起来是 really good：max-width: fit-content, max-width: -moz-fit-content

这应该添加到父 div 中吧？但它对我不起作用！ @Pranav

【参考方案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>

【讨论】：

这里的诀窍是将display: inline-block 也设置为父级，而不仅仅是子级。为我工作，所以我赞成取消反对票:-)

【参考方案4】：

使用

 width: max-content 

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

【参考方案5】：

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

.parent 
    display: inline-block;

默认情况下，html 中带有display: block; 的元素将占据其父元素的整个宽度。在您的情况下，.parent 元素，因为有 display: block; 占用了其父元素的整个宽度。因此，通过为.parent 元素设置display: inline-block; 将使其宽度变得等于其内容，在这种情况下是其.child 元素所占据的总宽度。

【参考方案6】：

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

你可以试试这个

【讨论】：

如果您是我们 * 您为所有元素设置此属性....这是不正确的

【参考方案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>

【讨论】：

请在您的 cod 中提供一些解释。