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

#html #css #css-float #width #fluid-layout

#HTML #css — файл #css-float #ширина #fluid-layout #css

Вопрос:

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

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

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

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

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

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

1. Я почти уверен, что это невозможно сделать строго с помощью CSS, поэтому (если я прав) вам нужно добавить немного JavaScript.

2. Этого я и боялся. Возможно, CSS3 и HTML5 могли бы что-то сделать… Или нет?

3. Если вы готовы отказаться от поддержки IE7, вы легко сделаете это с помощью CSS. Вас волнует IE7? Хорошая идея — использовать мой волшебный вариант с обходным путем JavaScript для <=IE7

4. @ErickPetru: Видишь meta.stackexchange.com/questions/43019 / … — Я здесь только потому, что случайно оглянулся на этот вопрос.

5. @thirtydot, предположим, меня не волнует IE7. Не могли бы вы ответить, пожалуйста, как я могу сделать это легко только с помощью CSS?

Ответ №1:

Вы можете использовать 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;
}

1. Теперь, когда IE7 занимает менее 4% рынка (по крайней мере, здесь, в моей стране), я считаю, что это лучший выбор, поскольку он решает проблему только с помощью CSS.

2. @thirtydot Чувак, это эпическое решение! Чрезвычайно полезно во многих случаях. Спасибо!

Ответ №2:

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

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

Ответ №3:

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

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