DIV одинаковой ширины и высоты всегда по центру

[Melodyn]

Гуглил эту тему, но как-то не попалось решение. Так как я нуб, сделал самое простое и очевидное решение и решил поделиться с нубами всего мира

Суть: на одной строке должно располагаться несколько DIV'ов с одинаковыми отступами, одинаковой высотой и шириной, что их как бы центрирует. Путей решения этой задачи наверняка много, а самый простой вариант:

<content>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
</content>

В принципе, решение на CSS мне виделось примерно: height: width; -- но так к сожалению (или счастью) нельзя. Зато можно использовать фичу CSS3 для ширины:

content{
  display: block;
  height: 512px;
  width: auto;
  margin: 16px;
  padding: 4px;
  background: #fff;
}

content div{
  display: inline-block; /* блоки на одной строке */
  min-height: 128px;
  width: calc(100% / 4 - 8px); /* Используем CSS3 для расчёта ширины блоков,
                               вычтем отступы, созданные margin и padding */
  background: #ccc;
  margin: 4px;
}

Минимальная высота указана для случаев, когда ширина меньше 128 пикс, что можно сделать и для ширины. Просто так, потому что могу.

 

И осталось только узнать ширину, подставив её в CSS:

$(function(){
  var myWidth = $('content div').width(); // получаем ширину
  $('content div').css("height", myWidth); // устанавливаем её
});

 

В итоге оно работает на jsfiddle.

 

Вот и всё! Делитесь своими решениями.

 

[Launder]

51 минуту назад, Melodyn сказал:

с одинаковыми отступами

Отступы от краёв меньше отступов между элементов.

Цитата

одинаковой высотой и шириной

Растягиваю/сужаю окно - квадраты превращаются в вытянутые или растянутые прямоугольники.

[Melodyn]

2 минуты назад, Launder сказал:

Отступы от краёв меньше отступов между элементов.

Растягиваю/сужаю окно - квадраты превращаются в вытянутые или растянутые прямоугольники.

Отступы между рядами действительно больше, потому что margin указан для четырёх краёв. Можете сделать margin-bottom нулевым.

 

Не забывайте про кнопку Run - JS не работает в реальном времени, в отличие от CSS.

[Launder]

3 минуты назад, Melodyn сказал:

Не забывайте про кнопку Run - JS не работает в реальном времени, в отличие от CSS.

Да, вижу, ок.

Цитата

Отступы между рядами действительно больше, потому что margin указан для четырёх краёв.

Почему - я вижу.

Цитата

Можете сделать margin-bottom нулевым.

А можно вообще сделать так, чтоб контейнер был не фиксированным, а растягивался по высоте?

[Melodyn]

5 минут назад, Launder сказал:

чтоб контейнер был не фиксированным, а растягивался по высоте?

Контейнер - content? Конечно можно. Поставьте height: auto вместо height: 512px и он будет изменяться вместе с количеством/размером содержимого.

[Launder]

Отлично! С этими двумя правками: width: auto для контент и margin-bottom для div всё работает, в соответствии с тем что Вы написали в первом сообщении. Спасибо!

[Launder]

В смысле height: auto разумеется... А поскольку оно по-умолчанию auto, то его можно просто убрать.

[by chris]

@Melodyn, https://jsfiddle.net/9aL4oc76/4/

[Igor Schnaider]

7 часов назад, Melodyn сказал:

height: width; -- но так к сожалению (или счастью) нельзя.

padding-top можно использовать на псевдоэлементе (link).

[Melodyn]

7 часов назад, by chris сказал:

@Melodyn, https://jsfiddle.net/9aL4oc76/4/

Что-то не так:

 

1 час назад, Igor Schnaider сказал:

padding-top можно использовать на псевдоэлементе (link).

Очень интересный подход! Есть, правда и траблы: при установке текста внутри блока он становится не квадратным. Как пофиксим? Пруф.

[Igor Schnaider]

Можно так.

[Melodyn]

1 час назад, Igor Schnaider сказал:

Можно так.

Заметил, что у моего и вашего метода есть один недостаток - текст вылезает за пределы установленного padding. В принципе, это можно пофиксить, например, установив border, но может, есть идеи получше? http://codepen.io/anon/pen/bpRYvb?editors=1100

[Melodyn]

Получилось это исправить на своём коде: https://jsfiddle.net/9aL4oc76/6/ 

Ищу подходы к CSS.

[by chris]

3 часа назад, Melodyn сказал:

Что-то не так:

https://jsfiddle.net/9aL4oc76/7/

[Melodyn]

4 минуты назад, by chris сказал:

https://jsfiddle.net/9aL4oc76/7/

Ничего не изменилось.

[by chris]

1 минуту назад, Melodyn сказал:

Ничего не изменилось.

Я убрал полосы прокрутки. А что должно еще измениться, результат идентичен вашему.

[Melodyn]

12 минуты назад, by chris сказал:

Я убрал полосы прокрутки. А что должно еще измениться, результат идентичен вашему.

При чем тут полосы прокрутки? У меня блоки квадратные, а у вас прямоугольные:

[by chris]

4 минуты назад, Melodyn сказал:

При чем тут полосы прокрутки? У меня блоки квадратные, а у вас прямоугольные:

А вы их даже не заметили))

 

4 минуты назад, Melodyn сказал:

У меня блоки квадратные, а у вас прямоугольные

Относительно. Сожмите поле с результатом и ваши блоки выстроятся ровными прямоугольниками. http://i.imgur.com/IT8P6l9.jpg

Пожалуйста, эквивалентные квадраты логике вашей разметки https://jsfiddle.net/9aL4oc76/8/

[Melodyn]

9 минут назад, by chris сказал:

Пожалуйста, эквивалентные квадраты логике вашей разметки https://jsfiddle.net/9aL4oc76/8/

То ли лыжи не едут...

Название темы - блоки одинаковой высоты и ширины. Мой код действительно даёт прямоугольники, когда есть height: 128px или не было обновления страницы. Я смотрю на ваш код и вижу в нём блоки разной ширины и высоты, опять же два скрина с вашим и моим случаем: 

 

Edited March 27, 2016 by Melodyn

[by chris]

Сорри, мой вариант действительно не в тему)) У вас все замечательно работает, только код скрипта можно модернизировать.

[Igor Schnaider]

3 часа назад, Melodyn сказал:

В принципе, это можно пофиксить, например, установив border, но может, есть идеи получше?

Можно с помощью border. Ну или городить дополнительные элементы.

[Launder]

16 часов назад, Melodyn сказал:

Можете сделать margin-bottom нулевым.

Тогда, похоже, решение будет зависеть от размера шрифта.

Лучше, например, так...

[Melodyn]

2 минуты назад, Launder сказал:

решение будет зависеть от размера шрифта.

От размера шрифта вряд ли что-то может зависеть. Наиболее актуальная версия: https://jsfiddle.net/9aL4oc76/6/ так как уже после того кода вылезло много новых вопросов ) Если получится сделать опрятный код, то и на чистом CSS вариант получится.

[Launder]

2 минуты назад, Melodyn сказал:

От размера шрифта вряд ли что-то может зависеть.

Как это врят ли? Я специально поставил размер шрифта большой. Уберите в моём примере вертикальное выравнивание, и поставьте марджин-боттом, как Вы и говорили, и, увидите, что зависит.

[Melodyn]

11 минуту назад, Launder сказал:

марджин-боттом

 

11 минуту назад, Launder сказал:

размер шрифта

Эм? Размер шрифта font-size, а margin-bottom - это отступ снизу. Вы уверены, что вы говорим об одном и том же?