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]

  On 3/26/2016 at 6:26 PM, Melodyn said:

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

Expand  

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

  Цитата

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

Expand  

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

[Melodyn]

  On 3/26/2016 at 7:21 PM, Launder said:

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

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

Expand  

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

 

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

[Launder]

  On 3/26/2016 at 7:28 PM, Melodyn said:

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

Expand  

Да, вижу, ок.

  Цитата

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

Expand  

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

  Цитата

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

Expand  

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

[Melodyn]

  On 3/26/2016 at 7:36 PM, Launder said:

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

Expand  

Контейнер - 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]

  On 3/26/2016 at 6:26 PM, Melodyn said:

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

Expand  

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

[Melodyn]

  On 3/26/2016 at 8:56 PM, by chris said:

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

Expand  

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

 

  On 3/27/2016 at 2:13 AM, Igor Schnaider said:

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

Expand  

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

[Igor Schnaider]

Можно так.

[Melodyn]

  On 3/27/2016 at 4:32 AM, Igor Schnaider said:

Можно так.

Expand  

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

[Melodyn]

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

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

[by chris]

  On 3/27/2016 at 4:17 AM, Melodyn said:

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

Expand  

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

[Melodyn]

  On 3/27/2016 at 7:35 AM, by chris said:

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

Expand  

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

[by chris]

  On 3/27/2016 at 7:39 AM, Melodyn said:

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

Expand  

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

[Melodyn]

  On 3/27/2016 at 7:41 AM, by chris said:

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

Expand  

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

[by chris]

  On 3/27/2016 at 7:56 AM, Melodyn said:

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

Expand  

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

 

  On 3/27/2016 at 7:56 AM, Melodyn said:

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

Expand  

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

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

[Melodyn]

  On 3/27/2016 at 8:07 AM, by chris said:

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

Expand  

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

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

 

Edited March 27, 2016 by Melodyn

[by chris]

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

[Igor Schnaider]

  On 3/27/2016 at 6:13 AM, Melodyn said:

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

Expand  

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

[Launder]

  On 3/26/2016 at 7:28 PM, Melodyn said:

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

Expand  

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

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

[Melodyn]

  On 3/27/2016 at 11:58 AM, Launder said:

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

Expand  

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

[Launder]

  On 3/27/2016 at 12:02 PM, Melodyn said:

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

Expand  

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

[Melodyn]

  On 3/27/2016 at 12:06 PM, Launder said:

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

Expand  

 

  On 3/27/2016 at 12:06 PM, Launder said:

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

Expand  

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