一行5个元素，如何让第2、4个元素均分剩余宽度？

直接用Flexbox就能轻松实现你的需求，代码如下：

<div style="display: flex; width: 100%;">
  <div style="flex-shrink: 0;">1111111111</div>
  <div style="flex: 1; background-color: red;">2222222222</div>
  <div style="flex-shrink: 0;">3333333333</div>
  <div style="flex: 1; background-color: red;">4444444444</div>
  <div style="flex-shrink: 0;">5555555555</div>
</div>

关键样式说明： #

• 外层容器设置display: flex，让所有子元素排列在同一行；
• 第1、3、5个元素加flex-shrink: 0，确保它们不会被压缩，始终保持自身内容的宽度；
• 第2、4个元素设置flex: 1，这个属性会让它们自动平分容器的剩余可用空间，不管容器总宽度怎么变化，两者的宽度都会完全相等。

关于你之前的table方案 #

你之前的table写法里，两个td都设width: 100%会让浏览器优先分配空间给第一个td，导致第二个td被挤压。如果一定要用table实现，可以给table加table-layout: fixed，然后把第2、4个td的宽度设为相同比例，比如：

<table style="width: 100%; table-layout: fixed;">
  <tr>
    <td style="white-space: nowrap; width: auto;">1111111111</td>
    <td style="width: 50%; background-color: red;">2222222222</td>
    <td style="white-space: nowrap; width: auto;">3333333333</td>
    <td style="width: 50%; background-color: red;">4444444444</td>
    <td style="white-space: nowrap; width: auto;">5555555555</td>
  </tr>
</table>

不过这种方式不如Flexbox灵活，推荐优先用Flexbox方案。

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