2

因此，让我首先说我无论如何都不是设计师，我在各种项目中到处修改 HTML 和 CSS，但这对我来说从来都不是全职工作。但是，我最近一直在尝试使用他们的官方快速入门视频学习 Microsoft HTML5 w/ Javascript 和 CSS3 考试，我遇到了一个我似乎无法找到答案/解释的问题。

问题是：

How much space will my second column take if the definition of my grids is as follows:

.grid #mydivs > div{
            display: -ms-grid;
            -ms-grid-columns: 100px 1fr 100px;
            -ms-grid-rows: 100px 1fr 100px;
            width: 600px;
           height: 400px;
      }

看着它，我以为答案是 100px，但这似乎是不正确的。有人可以解释一下这里的正确答案是什么以及如何得出它吗？非常感激。

4

2 回答 2

3

这是非常奇怪的语法，这里是文档： http: //msdn.microsoft.com/en-us/library/windows/apps/hh466340.aspx我认为第二列是剩余宽度的剩余部分。所以可能是400px。

编辑：

它是如何工作的：

fr 代表剩余宽度的一小部分，因为只有一个 fr 宽度，值 1fr 表示“剩下的任何内容”，因此为 400px。如果有 1fr、3fr 表示将剩余宽度分成四等分，那么它们将是 100px 和 300px，因为它们使用了 1 个和 3 个四分之一。

于 2013-01-23T20:02:07.747 回答
2

根据http://msdn.microsoft.com/en-us/library/windows/apps/hh466340.aspx，您的第二列将占用剩余宽度的 1fr（分数）。知道您的第一列将使用 100px 和最后一个 100px 以及 600px 的总宽度：

答案应该是1 fraction of 400px (600px - 100px - 100px)或400px。

于 2013-01-23T20:02:17.563 回答