#css #css-float
#css #css-float
Вопрос:
При написании CSS мне всегда не хватает функции автоматической дочерней ширины для плавающих дочерних элементов, чтобы их общая ширина соответствовала ширине родительского элемента.
На самом деле мне трудно найти фразу в окне поиска Google, поэтому вы можете рассмотреть этот пример:
A ul содержит четыре li
li has float: left; list-style: none; и, поскольку есть четыре li элемента, каждый имеет width: 25%;
Что, если я хочу сделать количество li элементов переменным, вместо фиксированных четырех, чтобы li получить ширину 20%, когда их пять, или ширину 10%, если их десять, или ширину 50%, когда их два и т. Д.? Учитывая, что ul всегда имеет явно фиксированную ширину.
Ответ №1:
Возможно, вы сможете использовать гибкий интерфейс css3.
ul{display:box;}
li{box-flex:1;}
Вот jsfiddle для демонстрации (возможно, вам потребуется изменить -webkit на -moz или -o) http://jsfiddle.net/wKKte /
Комментарии:
1. Даже не знал об этом свойстве, я бы сказал, что это правильный путь. К черту обратную совместимость.
2. Именно так я и хочу, чтобы это работало, у вас есть вопрос, выбранный кандидат на ответ. Но эти префиксы подразумевают, что они не поддерживаются большинством браузеров. Если только можно найти более стандартный метод…
3. @Andreas Carlbom Что вы имели в виду под «обратной совместимостью»? Был ли это ваш подход, отображение: таблица, которую вы считаете устаревшей?
4. Нет, я имел в виду, что я предпочитаю подход Гарета, но он вообще не очень совместим с обратной связью, поскольку он новый в спецификации CSS3. Мой дисплей: таблица немного более совместима, по крайней мере, с IE8, но, как услужливо указал thirtydot, она эффектно провалилась, когда содержимое элементов списка не имело одинаковой длины.
5. @rahmanisback Да, к сожалению, в настоящее время это работает только в Webkit и Gecko. Это позор, потому что он идеально подходит. По-видимому, IE10 будет поддерживать это…