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