如何在不固定宽度的情况下让div并排填满容器？

嘿，我来帮你搞定这个问题！你现在面临的是动态生成的div既要在一行显示，又要完全填满容器，还不能用Flex布局对吧？咱们一步步来解决：

首先，先解决inline-block元素的空白问题 #

你现在用display: inline-block的话，HTML里的换行、空格会被解析成空白字符，这就是容器末尾（或者元素之间）出现空白的原因。可以通过以下方法消除：

• 把父容器的font-size设为0，然后给子div重置回正常的font-size，这样空白就会被消除。

然后，让动态div自动填满容器（无需知道数量） #

如果你的需求是让这些动态div均分容器宽度，那用表格布局是个完美的替代方案，完全不需要Flex：

• 把父容器设置为display: table; width: 100%; table-layout: fixed;，table-layout: fixed能让单元格宽度均分，避免内容影响宽度。
• 把每个子div设置为display: table-cell;，它们会自动填满父容器的宽度，不管数量多少。

修改后的代码示例 #

<body>
  <div style="width:30%"> test text </div>
  <div style="width:70%;border:1px solid black; display: table; table-layout: fixed; width: 100%;">
    <div style="background-color:red;display: table-cell;"> a1fsdfsdfsd </div>
    <div style="background-color:yellow;display: table-cell;"> b1dfsd </div>
    <div style="background-color:blue;display: table-cell;"> c1d </div>
  </div>
</body>

补充：如果坚持用inline-block的话（适合需要自定义宽度比例的场景） #

如果某些div需要特定宽度，剩下的div填充满，那可以用calc()配合消除空白的方法：

<body>
  <div style="width:30%"> test text </div>
  <div style="width:70%;border:1px solid black; font-size: 0;">
    <div style="background-color:red;display: inline-block; width: 30%; font-size: 16px;"> a1fsdfsdfsd </div>
    <div style="background-color:yellow;display: inline-block; width: 40%; font-size: 16px;"> b1dfsd </div>
    <div style="background-color:blue;display: inline-block; width: 30%; font-size: 16px;"> c1d </div>
  </div>
</body>

不过这种方法需要你能控制每个div的宽度比例总和为100%，如果是完全动态未知数量的话，还是表格布局更省心。

另外注意你原始代码里的小拼写错误：widht应该是width，已经帮你修正啦~

内容的提问来源于stack exchange，提问作者uzhas