Question

在XAML中，您可以用“*”单位定义尺寸属性（例如长度或宽度），其中*表示剩余空间的一部分。

因此，如果我有一个宽度为1000px的父元素，并且它有2个子节点，它们都被定义为1 *宽，则它们各为500px。如果一个定义为3 *，另一个定义为1 *，则一个定义为750px，另一个定义为250px。如果有第三个元素，并且3的宽度分别定义为“100px”，“”“2 ”，则3的宽度将为100px，300px，600px。

是否有相当的CSS，或者我应该使用calc（）来模拟它？

Answer 1

Flexible box layout model使用an OK support matrix（无IE）

进行此操作

它完全符合您的要求，例如：对于您的方案3：

<div class="box">
  <div>un</div><div>deux</div><div>trois</div>
</div>

.box {
  width: 1000px;
  display: box;
  box-orient: horizontal;
}

.box > div:nth-child(1){ width:100px; }
.box > div:nth-child(2){ box-flex: 1; }
.box > div:nth-child(3){ box-flex: 2; }

来自html5rocks示例的

Fiddle'd

Answer 2

虽然CSS不支持比率，但百分比是。这意味着你无法真正指定“宽度的其余部分”，但你通常可以得到你想要的东西。

例如，你的第一个1000px和1 *的例子可以通过指定`width：50％'来实现。你的第二个例子是75％和25％。

你的第三个例子有点复杂，混合固定的px值和百分比值是行不通的。你可以做的是使用一些聪明的边距来获得整体结果。

我创建了一个JS Fiddle to illustrate the third example。

是否有相当于XAML *单位的CSS？

2 个答案: