在未来的HTML或CSS版本中是否会有星号大小调整?
在WPF中,通过将宽度设置为星形,可以将列的宽度设置为占用剩余空间。在未来的HTML或CSS版本中会有类似的东西吗 例如:在未来的HTML或CSS版本中是否会有星号大小调整?,html,css,Html,Css,在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 </d
<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>
占据页面宽度的50像素
占页面剩余宽度的25%
占页面剩余宽度的75%
如果这可以在未来版本的浏览器中实现,那么它将真正帮助web开发人员
编辑但您已经可以这样做了:
<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>
占据页面宽度的50像素
占页面剩余宽度的25%
占页面剩余宽度的75%
额外的
padding left
和margin left
调整是将外部DIV
的内容模型设置为100%减去50px的宽度。您已经可以在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>
占用页面宽度的50像素
占页面剩余宽度的25%
占页面剩余宽度的75%
W3C的CSS工作组已经接受了一项建议,即使用百分比减去像素的功能,该功能可以达到与星形功能相同的效果
它可以这样工作,尽管我不确定
.fixedCol {
width:200px;
}
.fluidCol {
width:100% minus 200px;
}
这会不会使它100%宽,但向右突出50像素?@Charlie Somerville:它需要一些额外的调整,但它已经工作了。模板布局模块看起来非常有希望!你建议的当前解决方案完美地解决了我的问题!谢谢可以肯定的是,他们将其实现为
width:calc(100%-200px)
。