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

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

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

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

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

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

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

Ответы

Ответ 1

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

/* 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;
}

<div class="parent">
  <a href="#">Some</a>
  <a href="#">Other</a>
  <a href="#">Any</a>
</div>

<br>

<div class="parent">
  <a href="#">Some</a>
  <a href="#">Other</a>
  <a href="#">Any</a>
  <a href="#">One More</a>
  <a href="#">Last</a>
</div>

Ответ 2

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

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

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

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

Ответ 3

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

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