3

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

К примеру, есть код:

<div style="left">1</div>
<div style="left">12</div>
<div style="left">123</div>

Ширина всех блоков должна быть такой, как в последним блоке.

Можно как-то через сss реализовать?


Update: задача заключается в том, чтобы сделать это без основного блока (того, что включает в себе три блока).

2
  • Я обновил свой ответ под добавленное уточнение. Без js, увы, никак.
    – VenZell
    22 янв 2016 в 23:00
  • Без JS совсем никак. Даже если логически подумать: когда парсится первый элемент (из Вашего примера), он понятия не имеет не то, что о длине третьего элемента, а даже о его наличии. Следовательно и длину первого элемента посчитать не возможно, поскольку нет данных. Так что средствами чистого CSS да и без "оберточного" элемента - никак
    – cyadvert
    22 янв 2016 в 23:25

1 ответ 1

1

Вам подойдет любой из нижеприведенных вариантов.
Даже если родителя у блоков нет, всегда можно использовать вместо родителя body.

.table {
  border: 1px solid red;
  display: table;
}
.inline-block {
  border: 1px solid gold;
  display: inline-block;
}
.float {
  border: 1px solid green;
  float: left;
}
<div class="table">
  <div class="item">1</div>
  <div class="item">12</div>
  <div class="item">123</div>
</div>
<div class="inline-block">
  <div class="item">156756757</div>
  <div class="item">12412</div>
  <div class="item">123</div>
</div>
<br>
<div class="float">
  <div class="item">1</div>
  <div class="item">12412</div>
  <div class="item">123213123</div>
</div>

Почему это работает:

  1. Во всех трех случаях, родительские блоки не имеют своей ширины и получают ее от содержимого.
  2. Следовательно, ширина родителя напрямую зависит от дочернего блока с максимальной шириной.
  3. У вложенных элементов .item поведение не менялось, они ведут себя как блочные элементы.
  4. Особенность блочного поведения:
    • Блоки стремятся заполнить 100% ширины от родительского блока
    • Своей ширины у родителя нет
    • Блоки стремятся растянуть ширину родителя под ширину своего контента
    • Если ширина контента меньше итоговой ширины родителя после растяжения самым большим блоком, блоки увеличат свою ширину до 100% от родителя

Update: без javascript вам не удастся обойтись без вмешательства в разметку (добавления блока-обертки для указанных элементов). С использованием js корректный расчет все равно потребует невидимый блок-калькулятор с одним из стилей, описанным выше, но он будет добавлен временно и не повлияет на верстку страницы.

Если все же использовать javascript для решения задачи:

/* Создаем и добавляем в документ невидимый контейнер */
var tempContainer = document.createElement('DIV');
tempContainer.setAttribute('id', 'hidden-container');
document.body.appendChild(tempContainer);

/* Создаем и добавляем в документ блок-калькулятор */
var calculator = document.createElement('DIV');
calculator.setAttribute('id', 'calculator');
tempContainer.appendChild(calculator);

/* Выбираем элементы для подсчета ширины */
var items = document.querySelectorAll('.item');
var maxWidth;

/* Первый перебор найденных элементов */
for (var i = 0; i < items.length; i++) {
  /* Клонируем элемент в калькулятор */
  var itemClone = items[i].cloneNode(true);
  calculator.appendChild(itemClone);

  /* Вычисляем максимальную ширину */
  if (!maxWidth || (itemClone.offsetWidth > maxWidth)) {
    maxWidth = itemClone.offsetWidth;
  }
}

/* Второй перебор найденных элементов */
for (var j = 0; j < items.length; j++) {
  /* Устанавливаем блокам вычисленную максимальную ширину */
  items[j].style.width = maxWidth + 'px';
}

/* Удаляем невидимый контейнер вместе с калькулятором */
document.body.removeChild(tempContainer);
.item {
  border: 1px solid orange; /* для демонстрации */
}
.item + .item {
  margin-top: 5px; /* для демонстрации */
}
/* Невидимый элемент, служит в качестве временного контейнера */
#hidden-container {
  position: absolute;
  left: -9999px;
  top: -9999px;
}
/* Элемент для расчета максимальной ширины блока по контенту */
#calculator {
  display: table;
}
<div class="item">1234</div>
<div class="item">1234567</div>
<div class="item">12</div>

2
  • Да но задача заключается в том что бы сделать без основного блока (того что включает в себе три блока)...
    – Юрий90
    22 янв 2016 в 22:11
  • С этим уточнением задача без javascript нереализуема. Добавил эту информацию в вопрос
    – VenZell
    22 янв 2016 в 22:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.