英文:
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>
我想将它们封装到一行中，然后第二个和第四个元素扩展以填充剩余的宽度，使第二个和第四个元素具有相同的宽度。我该如何做？
我尝试过：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
但第二个元素会扩展以"挤占"第四个元素，这并不起作用。（注意：不一定要使用表格，只是我认为可以实现这个结果，但仍然不起作用）
英文:
For example, I have 5 elements:
<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>
Which I want them to be enclosed into a row, and then the second and forth element expand to fill the remain width, which the second and forth element would have same width. How can I do it?
I tried:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
Which the second element expands to "bully" the forth element, which is not working. (Note: it is not necessary to use table, just I think I can achieve the result and then use it, but stills not working)
答案1
得分: 0
将其他三个单元格设置为相同的宽度，并将2和4保持未定义。结果将是2和4均等地填充剩余的空间。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
请注意，代码部分没有翻译，仅返回翻译好的内容。
英文:
Set the other three cells to a common width and leave 2 and 4 undefined. The result will be that both 2 and 4 will fill the remaining space equally.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案2
得分: 0
你可以使用 flex-grow 和 flex-basis 的组合来实现这个效果。请注意，下面的第二个和第四个 <div> 元素具有相同的宽度，即使父容器中的剩余空间不同。
<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>
英文:
You can use a combination of flex-grow and flex-basis to achieve this. Note that the second and fourth divs below are the same width as each other, even when the remaining space in the parent is different.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论