Question

在WPF中，您可以通过将宽度设置为星形来设置列的宽度以占用剩余空间。在将来的HTML或CSS版本中会有类似的内容吗？

示例：

<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>

如果可以在未来版本的浏览器中实现，那将真正帮助Web开发人员。

Answer 1

有template layout module for CSS 3做类似的事情。

编辑但您已经可以这样做了：

<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>

额外的padding-left和margin-left调整是让外DIV的内容模型的宽度为100％减去50px。

Answer 2

您已经可以在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>

Answer 3

W3C的CSS工作组已经接受了一个百分比减去像素功能的提议，该功能可用于与星形功能相同的效果。

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

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

在将来的HTML或CSS版本中是否会出现明星大小调整？

3 个答案: