【问题标题】：How to add in-line elements so they fill available horizontal space? [duplicate]如何添加内嵌元素以填充可用的水平空间？ [复制]
【发布时间】：2018-02-28 15:33:33
【问题描述】：

我的目标是让项目填满父项的整个宽度。如果这是静态的，我可以将 width:% 像 width:33% 用于 3 个项目。这问题是项目的数量会改变

#container {
  background-color:red;
}
.item {
  background-color:yellow;
  display:inline-block;
}

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <!-- here new items will be added -->
</div>

【问题讨论】：

你应该调查一下 flexbox
我没有成功。我被关闭了：我的内容很小，空间很大，适合 flex 容器
@yarek 我添加了一些与 flexbox 不同的方法（如果您有兴趣支持旧版浏览器）

标签： css

【解决方案1】：

您可以通过 flexbox 使用以下解决方案。您可以在不更改 CSS 的情况下在 HTML 上添加更多元素：

#container {
  display:flex;
  flex-direction:row;
  justify-content:space-evenly;
}
.item {
  border:1px dashed red;
  width:100%;
}

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

【讨论】：

【解决方案2】：

此任务可以通过多种方式完成：Flexbox、quantity queries 和 display: table。无论如何我都会推荐使用第一种方法，除非你需要支持IE<10

1。弹性盒

Codepen demo

标记

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <!-- here new items will be added -->
</div>

CSS

#container {
  display: flex;
}

#container > div {
  flex: 1; 
}

这样做，所有内部元素将始终平均分配相同的空间。

2。数量查询

另一个选项是浮动元素并使用quantity queries，如果您的内部元素数量有限，例如

Codepen demo

标记

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

CSS

#container > div:nth-last-child(5):first-child,
#container > div:nth-last-child(5):first-child ~ div {
  width: 20%;
  float: left;
}

当然，这种方法需要在 CSS 中对可能出现在容器内的每个可能数量的内部 div 进行样式设置，并且还需要在父容器上进行一些浮动清除。它的可维护性较差，但也值得一提。

3。显示：表格；

最后，最后一个示例利用了display: table 和table-cell

Codepen demo

这里的风格很简单

#container { 
   display: table; 
   width: 100%; 
}

.item { 
   display: table-cell; 
}

【讨论】：