Как заставить детей автоматически устанавливать ширину родителя только с помощью CSS?

У меня есть компонент на стороне сервера, который генерирует «панель инструментов» для жидкостной компоновки, используя DIV без фиксированной ширины, генерируя много A внутри него.

Затем мне нужно настроить этот макет, чтобы все tags A автоматически соответствовали ширине родителя. Но число детей является переменным, а ширина родителя неизвестна (он автоматически подходит к окну).

Я провел несколько тестов с помощью этой скрипты: http://jsfiddle.net/ErickPetru/6nSEj/1/

Но я не могу найти способ сделать его динамичным (раскомментируйте последний тег A чтобы увидеть, как он не работает, LOL).

Я не могу изменить серверные источники для переноса HTML с фиксированной шириной. И я действительно хотел бы решить его только с помощью CSS, если есть какой-либо способ, даже если с помощью JavaScript я мог бы достичь этого результата.

Как я могу заставить всех детей автоматически подогнать себя к ширине родителя независимо от количества детей?

Вы можете использовать display: table-cell :

См .: http://jsfiddle.net/6nSEj/12/ ( или с 5 детьми )

Это не будет работать в IE7, потому что этот браузер просто не поддерживает display: table и friends.

 div.parent { .. width: 100%; display: table; table-layout: fixed; } div.parent a { .. display: table-cell; } 

Это уже довольно старый вопрос. Несмотря на то, что ответы на них были хорошо представлены в то время, в настоящее время Flexible Box Layout предлагает тот же результат с гораздо большей простотой, с хорошей поддержкой во всех современных браузерах. Я настоятельно рекомендую!

 /* Important parts */ .parent { display: flex; } .parent a { flex: 1; } /* Decoration */ .parent { padding: 8px; border: 1px solid #ccc; background: #ededed; } .parent a { line-height: 26px; text-align: center; text-decoration: none; border: 1px solid #ccc; background: #dbdbdb; color: #111; } 
  

Пока многие используют jQuery в качестве решения этой проблемы. Все, что вам нужно, это одна строка. Это от твоей скрипки.

 $("div.parent a").css("width", (($("div.parent").width() / $("div.parent a").length ) -2) + "px");