在未来的HTML或CSS版本中会有星型尺寸吗?

In WPF you can set the width of a column to occupy the remaining space by setting the width to a star. Will there be something similar in future versions of HTML or CSS?

在WPF中，可以通过将宽度设置为星形来设置列的宽度以占据剩余的空间。未来版本的HTML或CSS会有相似之处吗?

Example:

例子:

<div style="float: left; width: 50px;">
  Occupies 50px of the page width
</div>
<div style="float: left; width: 1*;">
  Occupies 25% of the rest of the page width
</div>
<div style="float: left; width: 3*;">
  Occupies 75% of the rest of the page width
</div>

It would really help web developers out there if this could be implemented in future versions of browsers.

如果这能在未来的浏览器版本中实现，这将对web开发人员有很大的帮助。

3 个解决方案

#1

There is a template layout module for CSS 3 that does something similar.

CSS 3的模板布局模块也有类似的功能。

Edit But you can already do that:

编辑，但你已经可以做到:

<div style="padding-left: 50px">
    <div style="float: left; width: 50px; margin-left: -50px;">
        Occupies 50px of the page width
    </div>
    <div style="float: left; width: 25%">
        Occupies 25% of the rest of the page width
    </div>
    <div style="float: left; width: 75%;">
        Occupies 75% of the rest of the page width
    </div>
</div>

The additional padding-left and margin-left adjustment is to have the content model of the outer DIV at 100% minus 50px width.

附加的拨左和留白调整是将外部DIV的内容模型设置为100% - 50px宽度。

#2

You can already achieve this in HTML...

你已经可以在HTML中实现这个了…

Here's your example, adjusted to work in just HTML.

这是您的示例，调整为仅使用HTML。

<div style="float: left; width: 50px;">
  Occu- pies 50px of the page width
</div>
<div style="margin-left: 50px; width: 100%;">
    <div style="float: left; width: 25%">
      Occupies 25% of the rest of the page width
    </div>
    <div style="float: left; width: 75%;">
      Occupies 75% of the rest of the page width
    </div>
</div>

#3

The W3C's CSS Working Group has accepted a proposal for a percent minus pixels feature which could be used to the same effect as the star feature.

W3C的CSS工作组已经接受了一个百分比减去像素特性的建议，这个特性可以和star特性一样有效。

It could work like this, although I'm not certain

它可以这样工作，虽然我不确定

.fixedCol {
    width:200px;
}
.fluidCol {
    width:100% minus 200px;
}

#1