Расположить блоки разной высоты один под другим, в несколько столбцов

@Андрей МСК · Регистрация: 29.10.2013

Студворк — интернет-сервис помощи студентам

Добрый день.

Есть блоки разной высоты. Нужно расположить их один под другим в несколько столбцов.
Пример

Это можно сделать при помощи CSS?
Помогите найти решение?

@tsj3amttaf · 02.09.2014, 00:46

Решение есть, вот пример:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="one">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>
<div id="two">
  <div class="d"></div>
  <div class="e"></div>
  <div class="f"></div>
</div>
<div id="three">
  <div class="g"></div>
  <div class="h"></div>
  <div class="i"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#one, #two, #three {
  width:30%;
  height:500px;
  display:inline-block;
}
.a, .b, .c, 
.d, .e, .f,
.g, .h, .i {
    margin-top:5px;
    width:100%;
}
.a {height:90px;background:green;}
.b {height:50px;background:silver;}
.c {height:150px;background:orange;}
 
.d {height:150px;background:green;}
.e {height:90px;background:silver;}
.f {height:50px;background:orange;}
 
.g {height:50px;background:green;}
.h {height:150px;background:silver;}
.i {height:90px;background:orange;}

@maximus2011 · 02.09.2014, 10:09

http://www.wookmark.com/jquery-plugin

@Андрей МСК · 02.09.2014, 20:44 **[ТС]**

tsj3amttaf, спасибо, за вариант. Но это и так понятно, что если блоки имеют определённую ширину и высоту, то их можно располагать как угодно. У меня же новостная лента, высота блоков может быть любой в зависимости от контента. Я думал, может можно css-свойствами задать такой вывод, но пока ничего не получается ((

maximus2011, интересный вариант. Понятно, как подключить плагин, но не понятно, как должен выглядеть сам код страницы (описание контента)

@tsj3amttaf · 02.09.2014, 23:54

Андрей МСК, Вы можете сделать высоту дочерних блоков (относительно #one, #two, #three) резиновой.
Фиксированная высота в примере, это всего лишь демонстрация!

Также не обязательно указывать точный размер и родительских блоков (#one, #two, #three), их можно указать в процентах.

@monochromer · 03.09.2014, 06:58

Как полагаю, автор вопроса не хочет, чтобы контент заполнял сначала одни столбец, затем другой, а заполнял по строкам. В таком случае, нужно искать в сети по запросу "masonry layout", "pinterest layout" и т.д.

Штука выглядит симпатично, но лично мне очень трудно воспринимать такой разбросанный контент.

@koza4ok · 03.09.2014, 16:10

Может сюда стоит посмотреть
http://habrahabr.ru/company/microsoft/blog/143158/

http://caniuse.com/#feat=multicolumn

@Андрей МСК · 05.09.2014, 14:24 **[ТС]**

Пример с выводом в несколько колонок тоже не очень подходит, т.к.посетитель вряд ли станет читать новости сначала в первой колонке, потом во второй... Последние новости должны быть всегда сверху, ниже более старые.
С jquery вообще не хочется заморачиваться, подключать для этого кучу библиотек и стилей.

В любом случае всем большое спасибо за советы.
Я сделал так: Добавил к каждому блоку с новостью свойство display:inline-block;
Получилась конечно немного не то, что хотелось, простая сетка, все блоки на одном уровне. Зато просто без без лишнего кода.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

@Андрей МСК 23 / 15 / 8 Регистрация: 29.10.2013 Сообщений: 294

	Расположить блоки разной высоты один под другим, в несколько столбцов 01.09.2014, 22:02. Показов 14862. Ответов 7 Метки нет (Все метки) Добрый день. Есть блоки разной высоты. Нужно расположить их один под другим в несколько столбцов. Пример Это можно сделать при помощи CSS? Помогите найти решение? 0

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	02.09.2014, 10:09
	http://www.wookmark.com/jquery-plugin 0

@Андрей МСК 23 / 15 / 8 Регистрация: 29.10.2013 Сообщений: 294
	02.09.2014, 20:44 [ТС]
	tsj3amttaf, спасибо, за вариант. Но это и так понятно, что если блоки имеют определённую ширину и высоту, то их можно располагать как угодно. У меня же новостная лента, высота блоков может быть любой в зависимости от контента. Я думал, может можно css-свойствами задать такой вывод, но пока ничего не получается (( maximus2011, интересный вариант. Понятно, как подключить плагин, но не понятно, как должен выглядеть сам код страницы (описание контента) 0

@tsj3amttaf 3 / 3 / 2 Регистрация: 31.08.2014 Сообщений: 15
	02.09.2014, 23:54
	Андрей МСК, Вы можете сделать высоту дочерних блоков (относительно #one, #two, #three) резиновой. Фиксированная высота в примере, это всего лишь демонстрация! Также не обязательно указывать точный размер и родительских блоков (#one, #two, #three), их можно указать в процентах. 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	03.09.2014, 06:58
	Как полагаю, автор вопроса не хочет, чтобы контент заполнял сначала одни столбец, затем другой, а заполнял по строкам. В таком случае, нужно искать в сети по запросу "masonry layout", "pinterest layout" и т.д. Штука выглядит симпатично, но лично мне очень трудно воспринимать такой разбросанный контент. 0

@koza4ok 632 / 440 / 67 Регистрация: 19.09.2012 Сообщений: 1,632
	03.09.2014, 16:10
	Может сюда стоит посмотреть http://habrahabr.ru/company/microsoft/blog/143158/ http://caniuse.com/#feat=multicolumn 0

@Андрей МСК 23 / 15 / 8 Регистрация: 29.10.2013 Сообщений: 294
	05.09.2014, 14:24 [ТС]
	Пример с выводом в несколько колонок тоже не очень подходит, т.к.посетитель вряд ли станет читать новости сначала в первой колонке, потом во второй... Последние новости должны быть всегда сверху, ниже более старые. С jquery вообще не хочется заморачиваться, подключать для этого кучу библиотек и стилей. В любом случае всем большое спасибо за советы. Я сделал так: Добавил к каждому блоку с новостью свойство display:inline-block; Получилась конечно немного не то, что хотелось, простая сетка, все блоки на одном уровне. Зато просто без без лишнего кода. 0