Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 23.10.2019, 23:32
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,283

ozoro, есть свойство columns, которое позволяет выводить элементы в столбики.
<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="x-ua-compatible" content="IE=edge">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
		.column-list {
			padding: 0 10px;
			border: 1px solid #000;
			list-style-position: inside;
			   -moz-column-count: 3;
			-webkit-column-count: 3;
			        column-count: 3;
		}

		.column-list li ul, .column-list li {
			-webkit-column-break-inside: avoid;
			          page-break-inside: avoid;
			               break-inside: avoid;
		}

	</style>
</head>

<body>
	<ul class="column-list">
		<li>Пункт #1</li>
		<li>Пункт #2</li>
		<li>Пункт #3</li>
		<li>Пункт #4</li>
		<li>Пункт #5</li>
		<li>Пункт #6</li>
		<li>Пункт #7
			<ul>
				<li>Пункт #7.1</li>
				<li>Пункт #7.2</li>
				<li>Пункт #7.3</li>
				<li>Пункт #7.4</li>
				<li>Пункт #7.5</li>
				<li>Пункт #7.6</li>
				<li>Пункт #7.7</li>
				<li>Пункт #7.8</li>
				<li>Пункт #7.9</li>
			</ul>
		</li>
		<li>Пункт #8
			<ul>
				<li>Пункт #8.1</li>
				<li>Пункт #8.2</li>
				<li>Пункт #8.3</li>
			</ul>
		</li>
		<li>Пункт #9</li>
		<li>Пункт #10</li>
		<li>Пункт #11
			<ul>
				<li>Пункт #11.1</li>
				<li>Пункт #11.2</li>
				<li>Пункт #11.3</li>
				<li>Пункт #11.4</li>
				<li>Пункт #11.5</li>
				<li>Пункт #11.6</li>
			</ul>
		</li>
		<li>Пункт #12</li>
		<li>Пункт #13</li>
		<li>Пункт #14</li>
		<li>Пункт #15</li>
		<li>Пункт #16</li>
		<li>Пункт #17</li>
		<li>Пункт #18</li>
		<li>Пункт #19</li>
		<li>Пункт #20</li>
		<li>Пункт #21</li>
		<li>Пункт #22</li>
		<li>Пункт #23</li>
		<li>Пункт #24</li>
		<li>Пункт #25</li>
		<li>Пункт #26</li>
		<li>Пункт #27</li>
		<li>Пункт #28</li>
		<li>Пункт #29</li>
		<li>Пункт #30</li>
		<li>Пункт #31</li>
		<li>Пункт #32</li>
		<li>Пункт #33</li>
		<li>Пункт #34</li>
		<li>Пункт #35</li>
		<li>Пункт #37</li>
		<li>Пункт #38</li>
	</ul>
</body>
</html>

Последний раз редактировалось Malleys, 25.10.2019 в 18:36.
Ответить с цитированием
  #12 (permalink)  
Старый 24.10.2019, 17:52
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 54

Malleys,
Благодарю, но это решение не кроссбраузерное.
Ответить с цитированием
  #13 (permalink)  
Старый 25.10.2019, 18:37
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,283

Сообщение от ozoro
это решение не кроссбраузерное.
Кроссбраузерное свойство column-count поддерживается во всех последних версиях браузеров. https://caniuse.com/#feat=mdn-css_pr...s_column-count

Вам нужно было добавить вручную префиксы, если вы не используете инструменты сборки, которые пропустят ваш код через, например, autoprefixer, чтобы поддерживать и более старые браузеры.

Если вам нужна поддержка более старых Safari (до 9 версии исключительно), Chrome (до 49 версии), Firefox (до 51 версии), то добавьте также свойства с префиксами -moz-column-count и -webkit-column-count. Добавил в код выше.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ищу jQuery плагин для создания меню Zeboton jQuery 9 15.09.2014 15:31
плагин jquery ajax upload Karabella jQuery 0 06.06.2013 21:25
Плагин jParallax для jQuery britanik jQuery 4 14.02.2010 12:11
syncTranslate jQuery плагин Snowcore Ваши сайты и скрипты 0 20.10.2009 19:00
Плагин для файрфокса - чтение изображений SunnyDay Общие вопросы Javascript 4 28.04.2009 17:30