欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

對于包含五個元素的行，如何讓第二個和第四個元素填充保持寬度均勻？

CSS
傅智翔1年前7瀏覽0評論

例如，我有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>

您可以結合使用flex-grow和flex-basis來實現這一點。請注意，下面的第二個和第四個div寬度相同，即使父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>

將其他三個單元格設置為相同的寬度，保留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>