提问人：wcminipgasker2023 提问时间：6/13/2023 最后编辑：wcminipgasker2023 更新时间：6/13/2023 访问量：36
对于有五个元素的行，如何让第二个和第四个元素填充均匀地保持宽度？
For a row with five elements, how to let second and forth element fill remain width evenly?
问：
例如，我有 5 个元素：
<span style="width:100%;">
<div>1111111111</div>
<div style="width:100%;background-color:red;">2222222222</div>
<div>3333333333</div>
<div style="width:100%;background-color:red;">4444444444</div>
<div>5555555555</div>
</span>
我希望将它们括成一行，然后第二个和第四个元素扩展以填充剩余宽度，第二个和第四个元素将具有相同的宽度。我该怎么做？
我试过了：
<table style="width:100%;">
<tr>
<td style="white-space:nowrap;">1111111111</td>
<td style="width:100%;background-color:red;">2222222222</td>
<td style="white-space:nowrap;">3333333333</td>
<td style="width:100%;background-color:red;">4444444444</td>
<td style="white-space:nowrap;">5555555555</td>
</tr>
</table>第二个元素扩展为“欺负”第四个元素，该元素不起作用。（注意：没有必要使用表格，只是我认为我可以达到结果然后使用它，但仍然不起作用）
答：
0赞
musicfuel
6/13/2023
#1
将其他三个单元格设置为公共宽度，并保留 2 和 4 未定义。结果是 2 和 4 将平均填充剩余空间。
<table style="width:100%;">
<tr>
<td style="width:10%;">1111111111</td>
<td style="background-color:red;">2222222222</td>
<td style="width:10%;">3333333333</td>
<td style="background-color:red;">4444444444</td>
<td style="width:10%;">5555555555</td>
</tr>
</table>
0赞
Christian Legge
6/13/2023
#2
您可以使用 和 的组合来实现此目的。请注意，下面的第二个和第四个 div 彼此的宽度相同，即使父项中的剩余空间不同也是如此。flex-growflex-basis
<div style="display: flex; width: 200px;">
<div style="background: red;">1</div>
<div style="background: orange; flex-basis: 1; flex-grow: 1;">2</div>
<div style="background: yellow;">3</div>
<div style="background: green; flex-basis: 1; flex-grow: 1;">4</div>
<div style="background: blue;">5</div>
</div>
<br/>
<div style="display: flex; width: 200px;">
<div style="background: red;">1111</div>
<div style="background: orange; flex-basis: 1; flex-grow: 1;">2</div>
<div style="background: yellow;">3333</div>
<div style="background: green; flex-basis: 1; flex-grow: 1;">4</div>
<div style="background: blue;">5555</div>
</div>
评论