Плитка из тегов div?

Question

[Игорь Касперский]

Добрый день, решил сделать плитку из div с разной высотой и шириной, вот безрезультатные старания. Пробовал и
display: inline-block,
float: left
Они выстраиваются в линию относительно гл.блока, но между ними пробелы, мне их убирать, т.е. пробелы, при помощи margin или position: relative? Что делать в таком случае?

Answer 1

[lavezzi1]

Если много плиток и нужна динамика, то - masonry.desandro.com

Если же нет, выравнивайте через position: absolute; То есть, задаете контейнеру position: relative, а div'am которые находятся внутри, ставите position absolute и двигаете.

Comments

[Игорь Касперский]

жаль что нужно прибегать к сторонним библиотекам(. В моем случаю всегда делают position absolute? А что за динамика? Внутри блока?

[lavezzi1]

Игорь Касперский: Под динамикой я имею ввиду CMS какое-нибудь. На что вам эти плитки нужны? Если их много и вы через что то их добавляете то ставьте Masonry, не так уж и сложно, примеры можно загуглить на codepen.com. В вашем случае да, нужно относительно позиционирование. Через флоаты и инлайны никак.

[Игорь Касперский]

lavezzi1: нее, добавлять блоки в плитку не буду, в блоках будет только анимация, 6 блоков и не более, хорошо, я вас понял, спс). А пока не начал делать, все будет ломаться если с телефона открыть?

[lavezzi1]

Игорь Касперский: Нет, работает на телефонах все ок.

Answer 2

[Андрей Федоров]

Про mansory вам правильно сказали, однако наша задача убрать пробелы:
Варианте 1:
<div></div><div></div>
или

<div></div><!--
--><div></div>

Вариант 2:
Плитки оборачиваем в контейнер

.container {
letter-spacing: -1em;
}

Правда тут придется вложенным в плитки элементам восстановить межсимвольный интервал.

Comments

[Игорь Касперский]

Восстанавливать - это letter-spacing: 1px?

[Андрей Федоров]

letter-spacing: 0;