Задать вопрос
@NPC
...
html

Перенос inline блоков парами

Можно ли без js сделать так что бы inline блоки переносились на новую строку не по 1, а по 2 или по 3 ?

Например еcть список
/* html */
<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
</ul>

/* CSS */
ul>li {
   width: 100px;
   height: 100px;
   display: inline-block;
}


При размере окна >400px все блоки выстраиваются соответственно в 1 линию, уменьшаем окно до 350px - 3 блока остаются на 1 линии и последний уходит вниз.
Вопрос: как сделать что бы при уменьшении размера окна на 50px (как например в этом примере) на новую строку переносился не один блок, а 2, что бы было 2 на одной строке и 2 на другой? Возможно ли такое вообще без js, на чистом CSS и html
  • Вопрос задан
  • 10655 просмотров
Комментировать
Подписаться 4 Оценить Комментировать
Решения вопроса 1
@m-haritonov
@iiil меня опередил:
<!DOCTYPE html>
<html>
    <head>
		<style>
			div {
				display: inline-block;
			}
			
			div>div {
				display: inline-block;
				width: 100px;
				height: 100px;
				background: #ccc;
			}
		</style>
    </head>
    <body>
		<div>
		   <div>1</div>
		   <div>2</div>
		</div>
		<div>
		   <div>3</div>
		   <div>4</div>
		</div>
		<div>
		   <div>5</div>
		   <div>6</div>
		</div>
		<div>
		   <div>7</div>
		   <div>8</div>
		</div>
		<div>
		   <div>9</div>
		   <div>10</div>
		</div>
		<div>
		   <div>11</div>
		   <div>12</div>
		</div>
    </body>
</html>


UPDATE: более изящный вариант:
<!DOCTYPE html>
<html>
    <head>
		<style>
			* { margin: 0; padding: 0; }
			
			ul { list-style: none; text-align: center; }
			
			ul>li {
				float: left;
				width: 100px;
				height: 100px;
				background: #000;
			}
			
			ul>li:nth-child(odd) {
				margin-right: 100px;
				background: #999;
			}
			
			ul>li:nth-child(even) {
				margin-left: -100px;
				background: #eee;
			}
		</style>
    </head>
    <body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
		</ul>
    </body>
</html>

Селектор ":nth-child" в IE доступен лишь начиная с версии 9.0, поэтому, если требуется поддержка более ранних версий IE, можно заменить его добавлением в CSS классов "odd" и "even" при генерации HTML кода.
Ответ написан
5 комментариев
5 комментариев
Пригласить эксперта
Ответы на вопрос 2
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Самый простой вариант - объединять попарно блоки и у них прописывать inline-block
Ответ написан
Комментировать
Комментировать
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
@media.
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать чат-бота в Телеграм
23 дек. 2024, в 19:16
7000 руб./за проект
Доработать сценарий на js puppeteer в инстаграм
23 дек. 2024, в 18:53
5000 руб./за проект
Фронтэнд разработчик для Telegram Mini Apps
23 дек. 2024, в 18:08
15000 руб./за проект
Ещё заказы