在不使用绝对值的情况下，如何使一列的宽度是另一列的两倍？

Question

示例：

<table width="500">
    <tr>
        <td width="50">1</td>
        <td width="100%">2</td>
        <td width="100">3</td>
    </tr>
</table>

如果我没有弄错，如果一个宽度是一个百分比，它是父元素总宽度的一个百分比，而不是剩余宽度的一个百分点，对吗？

好吧，好吧，那么当我们混合百分比和像素宽度时会发生什么？在上面的示例中，列2 占据尽可能多的空间，并将1和2对侧压缩，但它并不隐藏它们；它允许它们有足够的空间来显示其内容，即使设置了overflow:hidden。

如果我们用将第2栏改为10%代替，那么这个百分比似乎还是优先的，但是它似乎仍然尊重1和3-3的比例性，它的宽度仍然是1的两倍，即使确切的宽度没有指定。

那么，如果我们希望设置2列，并让第3列填充剩余的空间，该怎么办？简单！完全是省略值。

好吧，但是如果我们想要将一列设置为一个显式像素宽度，并让第二列是第三列宽度的两倍来填充剩余的空间呢？这在HTML/CSS中是可能的吗？

样品小提琴

Answer 1

这似乎适用于Chrome，但不适用于IE或Edge：

<table style="width: 500px;">
    <tr style="display: flex;">
        <td style="width: 50px;">1</td>
        <td style="flex-grow: 2;">2</td>
        <td style="flex-grow: 1;">3</td>
    </tr>
</table>

然而，对于<div>，它似乎适用于Chrome和Edge：

<div style="width: 500px; display: flex;">
    <div style="width: 50px;">1</div>
    <div style="flex-grow: 2;">2</div>
    <div style="flex-grow: 1;">3</div>
</div>

我没有经常使用flex，但我相信flex-grow之后的数字是flex元素中每个元素要占用的剩余空间。

编辑： Flexbox布局目前在W3C候选推荐中。您可以阅读更多关于它的这里。