powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / css3 multi columns: разделение блока на 2 соседние колонки
5 сообщений из 5, страница 1 из 1
css3 multi columns: разделение блока на 2 соседние колонки
    #38899857
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Имеется несколько колоно. На колонки разбиваются div-блоки, каждый из которых состоит из нескольких строк текста (число строк и следовательно, высота div-блока может быть произвольной).
Если div-блок оказывается в конце столбца, часть его строк переносится в начало следующего столбца. Т.е. блок разбивается на части - от одной до другой как от Москва до Камчатки.

На сегодняшний день существует ли решение этой проблемы ?
Вот здесь предложили задать фиксированную высоту + (overflow = hidden). Но в моём случае блоки имеют произвольную высоту (произвольное число строк).
...
Рейтинг: 0 / 0
css3 multi columns: разделение блока на 2 соседние колонки
    #38899938
Фотография -k2-
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Cyrax_02,

посмотреть как в masonry сделано?
http://masonry.desandro.com/
...
Рейтинг: 0 / 0
css3 multi columns: разделение блока на 2 соседние колонки
    #38899945
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Cyrax_02Имеется несколько колоно. На колонки разбиваются div-блоки, каждый из которых состоит из нескольких строк текста (число строк и следовательно, высота div-блока может быть произвольной).
Если div-блок оказывается в конце столбца, часть его строк переносится в начало следующего столбца. Т.е. блок разбивается на части - от одной до другой как от Москва до Камчатки.

На сегодняшний день существует ли решение этой проблемы ?
Вот здесь предложили задать фиксированную высоту + (overflow = hidden). Но в моём случае блоки имеют произвольную высоту (произвольное число строк).

На css есть column-count для разбивки контента по столбцам. Если чем-то не устраивает, тогда js.
...
Рейтинг: 0 / 0
css3 multi columns: разделение блока на 2 соседние колонки
    #38900433
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Похоже, никто не понял, о чём речь.
(column-width/column-count) создают такую разбивку:

авторБлок 1: 111 222____ 333 444 555
333 444 555_______Блок 4: 1212 333
Блок 2: кукукуу____3у232 554 565 77
Блок 3: 111 222 ____Блок 5: 66666666

Здесь блок 3 рвётся на 2 столбца.
...
Рейтинг: 0 / 0
css3 multi columns: разделение блока на 2 соседние колонки
    #38900496
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
http://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element
https://developer.mozilla.org/ru/docs/Web/CSS/break-inside
http://habrahabr.ru/company/microsoft/blog/143158/

Решением проблемы является свойство break-inside: avoid-column;
Код: css
1.
2.
3.
4.
5.
-moz-column-break-inside:    avoid-column;
-webkit-column-break-inside: avoid-column;
-o-column-break-inside:      avoid-column;
-ms-column-break-inside:     avoid-column;
break-inside:                avoid-column;


Учитывая, что это свойство не понимают даже современные браузеры, приходится делать так
Код: css
1.
2.
3.
4.
5.
-moz-column-break-inside:    avoid;
-webkit-column-break-inside: avoid;
-o-column-break-inside:      avoid;
-ms-column-break-inside:     avoid;
break-inside:                avoid;


Значение avoid современные браузеры понимают (и только современные).
...
Рейтинг: 0 / 0
5 сообщений из 5, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / css3 multi columns: разделение блока на 2 соседние колонки
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]