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

【问题标题】：How can we make one column twice the width of another, without using absolute values?我们如何在不使用绝对值的情况下使一列的宽度是另一列的两倍？
【发布时间】：2011-07-12 09:33:14
【问题描述】：

例子：

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

如果我没记错的话，如果宽度是以百分比形式给出的，它是父元素的 total 宽度的百分比，而不是剩余宽度的百分比> 宽度，对吗？

好的，那么当我们混合百分比和像素宽度时会发生什么？在上面的示例中，第 2 列 takes up as much space as it can，并将 1 和 2 挤压到侧面但它不会隐藏它们；即使设置了overflow:hidden，它也允许他们有足够的空间来显示他们的内容。

如果我们改为change column 2 to 10%，则百分比似乎再次优先，但它似乎仍然尊重 1 和 3 的比例——3 仍然是 1 的两倍，即使确切的宽度不是指定。

那么如果我们想设置 2 列，让第 3 列填满剩余的空间呢？简单！完全是omit the value。

很好，但是如果我们想将一列设置为明确的像素宽度，并且第二列的宽度是第三列的两倍以填充剩余空间，该怎么办？这在 HTML/CSS 中是否可行？

sample fiddle

【问题讨论】：

顺便说一句，根据 HTML5 规范，TD 元素的 width 属性已过时，"must not be used by authors"。
@Sime：这不是重点。我可以用 CSS 轻松设置它们，它们的行为也一样。

标签： html css dom

【解决方案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 候选推荐中。你可以阅读更多关于它的信息here。

【讨论】：