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これは、2番目の列が残りの幅の残りの部分であることを示していると思います。おそらく400px。

編集：

それがどのように働きますか：

frの幅は1つしかないため、frは残りの幅の一部を表します。値1frは「残っているものは何でも」、つまり400pxを意味します。1fr、3frがあった場合、残りの幅を4分の1に分割することを意味します。したがって、1と3の4分の1を使用したため、100pxと300pxになります。

于 2013-01-23T20:02:07.747 に答える
2

http://msdn.microsoft.com/en-us/library/windows/apps/hh466340.aspxによると、2番目の列は残りの幅の1fr（端数）を取ります。最初の列は100pxを使用し、最後の列も600pxの全幅のうち100pxを使用することを知っています。

答えはまたはである必要があり1 fraction of 400px (600px - 100px - 100px)ます400px。

于 2013-01-23T20:02:17.563 に答える