0

Есть 12 блоков разной высоты, высота может меняться, все они идут в линию друг за другом, дойдя до конца контейнера начинается следующая строка.

Задача состоит в том, чтобы не было вертикального пространства между блоками и порядок блоков сохранялся.

Плагин Masonry делает почти то, что мне нужно, но он ломает порядок блоков.

Наверняка есть решение и без плагина, но я все никак не справлюсь с этой задачей.

Появилось решение этой задачи - https://masonry.desandro.com/options.html#horizontalorder

введите сюда описание изображения

2

3 ответа 3

2

Это достаточно нетривиальная задача. И сохранить в данном случае какую-либо желаемую последовательность блоков трудно. Для ее решения существует множество js-библиотек, кроме Masonry, которые находятся по запросу "cascading grid layout", есть так же и css-решения (гуглятся по запросу "css masonry grid"):

http://w3bits.com/labs/css-masonry/

#container {
    width: 100%;
    max-width: 700px;
    margin: 2em auto;
}
.cols {
    -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;
}
.box {
    margin-bottom: 20px;
}
.box.one {
    height: 200px;
    background-color: #d77575;
}
.box.two {
    height: 300px;
    background-color: #dcbc4c;
}
.box.three {
    background-color: #a3ca3b;
    height: 400px;
}
.box.four {
    background-color: #3daee3;
    height: 500px;
}
.box.five {
    background-color: #bb8ed8;
    height: 600px;
}
.box.six {
    background-color: #baafb1;
    height: 200px;
}
<div id="container" class="cols">
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box one"></div>
    <div class="box three"></div>
    <div class="box two"></div>
    <div class="box five"></div>
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box six"></div>
    <div class="box three"></div>
    <div class="box two"></div>
</div>

1
  • Да, задача оказалась сложней, чем предполагалось. Рассматривал варианты с помощью column, либо через flexbox-колонки. Видимо это единственное решение.
    – user219667
    8 авг 2016 в 6:42
0

Если не требуется поддержка IE9 и менее, то подойдет flexbox

.container{
  display: flex;
  flex-wrap: wrap;
}

.box{
  width:100px;
  margin: 2px;
}

.box1 {
	background-color: red;
}
.box2 {
	background-color: black; 
}
.box3 {
	background-color: gray;
}
.box4 {
	background-color: orange;
}
.box5 {
	background-color: gold;
}
.box6 {
	background-color: silver;
}
.box7 {
	background-color: blue;
}
.box8 {
	background-color: cyan;
}
.box9 {
	background-color: violet;
}
.box10 {
	background-color: brown;
}
.box11 {
	background-color: purple;
}
.box12 {
	background-color: green;
}
<div class="container">
	<div class="box box1">1
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliqu
		quis nostrud exercitation ullamco laboris nisi ut aliq
    </div>

	<div class="box box2">2
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nis
	</div>

  
	<div class="box box3">3
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis au
	</div>

	<div class="box box4">4
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	</div>

	<div class="box box5">5
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
	</div>

	<div class="box box6">6
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>

	<div class="box box7">7
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	</div>

	<div class="box box8">8
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>

	<div class="box box9">9
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	</div>
 
	<div class="box box10">10
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,	
	</div>
	
	<div class="box box11">11
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	</div>

	<div class="box box12">12
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	</div>	
  </div>

В остальном лучше пользоваться готовыми вариантами, достаточно много способов и различных библиотек гуглятся простым запросом "колонки одинаковой высоты" или "Equal Height Columns"

1
  • Это хороший вариант, но высота блоков должна зависеть от содержания, затем каждый блок должен подтягиваться к блоку над ним.
    – user219667
    9 авг 2016 в 4:14
-3
  1. У тебя 12 блоков с display:inline-block. Поэтому они в строку выстраиваются, но и имеют при этом свойства блочного элемента.

  2. Когда ты пишешь код, то ты его форматируешь - используешь пробелы, переводы строки между элементами... Эти все символы содержатся в твоем документе. Все элементы и символы между ними браузер расценивает, как то, что надо вывести на экран. Вот и выводит твои пробелы и переводы строк в виде текстовых узлов-объектов (у них тип элемента - TEXT), объект-прототип для этого объекта - это Text. Этот объект выводится на экран. Но это не то же самое, что, например, объект var x="text"; - у этого объекта объектом-прототипом является String{}. А этот объект не выводится на экран.

  3. С этими объектами-узлами типа TEXT можно сделать следующее:

    • Удалить (пробежаться циклом по потомкам конкретного элемента и использовать removeChild()).

    • Убрать пробелы и перевод строки между этими 12-тью элементами.

    • Задать размер шрифта ноль в этих текстовых объектах.

Ваш ответ

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

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