2

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

所以，如果我有一个 1000px 宽的父元素，并且它有 2 个子元素，它们都被定义为 1* 宽，那么它们每个都是 500px。如果一个定义为 3*，另一个定义为 1*，那么一个是 750px，另一个是 250px。如果有第三个元素，并且3的宽度分别定义为“100px”、“ ”“2 ”，那么3的宽度分别为100px、300px、600px。

是否有与此等效的 CSS，或者我应该使用 calc() 来模拟它？

4

2 回答 2

1

灵活的盒子布局模型使用OK 支持矩阵（无 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

于 2012-06-20T05:42:36.893 回答
0

尽管 CSS 不支持比率，但百分比是支持的。这意味着您不能真正指定“宽度的其余部分”，但您通常可以得到您想要的。

例如，您的第一个 1000px 示例可以通过分配“宽度：50%”来实现。你的第二个例子是 75% 和 25%。

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

我创建了一个JS Fiddle 来说明第三个示例。

于 2012-06-19T23:45:08.687 回答