Можно ли установить ширину набора элементов до 100%?

Question

Возможно, это не самое лучшее название, которое я когда-либо писал, но мне трудно сформулировать этот вопрос хорошо. Я работаю над div, который должен покрывать 100% родительского элемента (может быть body). Этот div должен иметь переменное число детей, поэтому при каждом обновлении страницы число детей может варьироваться от одного до десяти, а может и больше.

Я хочу, чтобы все эти дети были одинаково широкими и имели бы процентную ширину. Таким образом, если есть пять детей, у каждого ребенка должно быть width: 20%. Если есть двое детей, у них должно быть width: 50%. Я мог бы сделать это с помощью JavaScript, но я бы действительно предпочел сохранить все элементы макета в CSS.

Есть ли способ сделать это без использования таблиц?

Answer 1

Вы можете определить что-то вроде

div#contains2 div
{
    width: 50%;
}

div#contains3 div
{
    width: 33%;
}

и так далее, а затем применить соответствующий класс к родительскому div.

Тем не менее, есть веская причина, по которой вы избегаететаблицы, но пытаетесь воссоздать, как таблица работает?Конечно, это может быть не самый приятный способ «спать-спать-ночью», чтобы создать страницу, но если таблица выполняет свою работу так, как вы хотите, и вы не можете придумать что-то еще, идитес таблицей.

---

Суть в том, что у вас есть по существу 3 варианта для автоматических столбцов одинаковой ширины:

• Таблицы, которые делают это из коробки и будутработать в кросс-браузерном режиме без каких-либо серьезных проблем
• jQuery, который, вероятно, будет работать в кросс-браузерном режиме, при условии, что у пользователя включен JS
• CSS, как я предлагал выше, что добавляет раздувание к вашему CSS-файлу, ипух к вашей разметке

Answer 2

Используйте display: table, display: table-cell и table-layout: fixed.

См .: http://jsfiddle.net/thirtydot/ZKXrM/

table-layout: fixed предназначен для равномерного распределения доступной ширины между любыми ячейками без назначенной ширины.

Это работает во всех современных браузерах. Это не работает в IE7. Если вам нужно это для работы в IE7, либо используйте JavaScript для полифиллинга, либо используйте настоящий <table>.

CSS:

.container {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.container > div {
    display: table-cell;
    border: 1px dashed red;
}

HTML:

<div class="container">
    <div>1</div>
    <div>2</div>
    ..
</div>​

Answer 3

Вы можете разделить общую ширину (100%) на количество элементов (X). Итак, W = 100 / X и W = Ширина.