Есть ли эквивалент CSS для XAML * единицы?

Question

В XAML вы можете определить свойство размера (такую ​​длину или ширину) в единицах «*», в которых * представляет собой часть оставшегося пространства.

Итак, если у меня есть родительский элемент шириной 1000 пикселей, и он имеет 2 детей, которые определены как шириной 1 *, они будут составлять по 500 пикселей. Если он определен как 3 *, а другой как 1 *, тогда будет 750px, а другой 250px. Если есть третий элемент, а ширина 3 определяется как «100px», «» «2» соответственно, то ширина 3 будет составлять 100px, 300px, 600px.

Есть ли эквивалент CSS этого, или я должен просто имитировать его с помощью calc()?

Answer 1

Flexible box layout model делает это с an OK support matrix (не 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; } 

Fiddle'd из примера HTML5ROCKS

Answer 2

Хотя коэффициенты не поддерживаются в CSS, проценты есть. Это означает, что вы не можете указать «остальную часть ширины», но обычно можете получить то, что хотите.

Например, ваш первый пример 1000px с 1 * может быть достигнут путем назначения `width: 50% '. Ваш второй пример будет 75% и 25%.

Ваш третий пример немного сложнее, смешение фиксированных значений px и процентных значений не будет работать. То, что вы можете сделать, это использовать некоторые умные поля, чтобы получить общий результат.

Я создал JS Fiddle to illustrate the third example.