Как заставить детей автоматически соответствовать ширине родительского элемента только с помощью CSS - PullRequest
Новая
       34

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

12 голосов
/ 02 мая 2011

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

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

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

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

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

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

Ответы [ 3 ]

13 голосов
/ 03 мая 2011

Вы можете использовать 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;
}
4 голосов
/ 23 сентября 2016

Это уже довольно старый вопрос. Несмотря на то, что в то время ответы давали хорошие отзывы, в настоящее время 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;
}
<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>
0 голосов
/ 02 мая 2011

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

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