2

XAML では、サイズ プロパティ (長さや幅など) を "*" 単位で定義できます。* は残りのスペースの一部を表します。

したがって、幅が 1000px の親要素があり、2 つの子要素があり、どちらも 1* 幅として定義されている場合、それぞれ 500px になります。1 つが 3* として定義され、もう 1 つが 1* として定義されている場合、1 つが 750px、もう 1 つが 250px になります。3 番目の要素があり、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の例からのフィドル

于 2012-06-20T05:42:36.893 に答える
0

CSS では比率はサポートされていませんが、パーセンテージはサポートされています。つまり、「残りの幅」を実際に指定することはできませんが、通常は必要なものを取得できます。

たとえば、1* を使用した 1000px の最初の例は、「幅: 50%」を割り当てることで実現できます。2 番目の例は 75% と 25% です。

3 番目の例はもう少し複雑で、固定の px 値とパーセンテージ値を混在させても機能しません。あなたができることは、全体的な結果を得るためにいくつかの巧妙なマージンを使用することです.

3 番目の例を説明するために JS Fiddle を作成しました。

于 2012-06-19T23:45:08.687 に答える