Будет ли размер звезд в будущих версиях HTML или CSS? - PullRequest
4 голосов
/ 26 января 2010

В WPF вы можете установить ширину столбца, чтобы занимать оставшееся пространство, установив ширину в виде звезды. Будет ли что-то подобное в будущих версиях HTML или CSS?

Пример:

<div style="float: left; width: 50px;">
  Occupies 50px of the page width
</div>
<div style="float: left; width: 1*;">
  Occupies 25% of the rest of the page width
</div>
<div style="float: left; width: 3*;">
  Occupies 75% of the rest of the page width
</div>

Это действительно помогло бы веб-разработчикам, если бы это могло быть реализовано в будущих версиях браузеров.

Ответы [ 3 ]

6 голосов
/ 26 января 2010

Существует модуль макета шаблона для CSS 3 , который делает нечто подобное.


Редактировать Но вы уже можете это сделать:

<div style="padding-left: 50px">
    <div style="float: left; width: 50px; margin-left: -50px;">
        Occupies 50px of the page width
    </div>
    <div style="float: left; width: 25%">
        Occupies 25% of the rest of the page width
    </div>
    <div style="float: left; width: 75%;">
        Occupies 75% of the rest of the page width
    </div>
</div>

Дополнительная настройка padding-left и margin-left должна иметь модель содержимого внешнего DIV с шириной 100% минус 50 пикселей.

2 голосов
/ 26 января 2010

Рабочая группа CSS W3C приняла предложение о функции процента с минусом пикселей, которая может использоваться с тем же эффектом, что и функция звезды.

Это может работать так, хотя я не уверен

.fixedCol {
    width:200px;
}
.fluidCol {
    width:100% minus 200px;
}
2 голосов
/ 26 января 2010

Вы уже можете достичь этого в HTML ...

Вот ваш пример, настроенный для работы только в HTML.

<div style="float: left; width: 50px;">
  Occu- pies 50px of the page width
</div>
<div style="margin-left: 50px; width: 100%;">
    <div style="float: left; width: 25%">
      Occupies 25% of the rest of the page width
    </div>
    <div style="float: left; width: 75%;">
      Occupies 75% of the rest of the page width
    </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...