Непростая задача

@Gerd199 · 18.11.2015, 23:18. **Показов** 1488. **Ответов** 9

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

Ребят, помогайте.

Есть квадрат с известной шириной и выстой.

Необходимо в данном квадрате разместить 20 маленьких квадратов. Размер которых неизвестен, точнее сказать он известен. Но не одинаковый, у всех свой и эти квадраты необходимо разместить в одном большом так, чтобы они были плотно к друг другу.

Вот не понимаю, как так сделать? Разместить 20 одинаковых квадратов одно дело, но размеры каждого индивидуальны еще и плотно друг к другу.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div style="background: #fff; border: 1px solid #dbe4ef; padding:4px;  height: 220px;"> 
<div style="border: 1px solid #dbe4ef; padding:3px; width: 70px; height: 70px; float:left;">s</div>
<div style="border: 1px solid #dbe4ef; padding:3px; width: 30px; height: 30px; float:left;">s</div>
<div style="border: 1px solid #dbe4ef; padding:3px; width: 20px; height: 20px; float:left;">s</div>
<div style="border: 1px solid #dbe4ef; padding:3px; width: 20px; height: 20px; float:left;">s</div>
<div style="border: 1px solid #dbe4ef; padding:3px; width: 25px; height: 25px; float:left;">s</div>
<div style="border: 1px solid #dbe4ef; padding:3px; width: 20px; height: 20px; float:left;">s</div>
<div style="border: 1px solid #dbe4ef; padding:3px; width: 20px; height: 20px; float:left;">s</div>
<div style="border: 1px solid #dbe4ef; padding:3px; width: 10px; height: 10px; float:left;">s</div>
<div style="border: 1px solid #dbe4ef; padding:3px; width: 20px; height: 20px; float:left;">s</div>
<div style="border: 1px solid #dbe4ef; padding:3px; width: 20px; height: 20px; float:left;">s</div>
<div style="border: 1px solid #dbe4ef; padding:3px; width: 20px; height: 20px; float:left;">s</div>
 </div>

@mrBobrillo · 18.11.2015, 23:21

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

@Gerd199 · 18.11.2015, 23:23 **[ТС]**

Быть может уже есть какой нибудь готовенький скрипт?

@Glart · 18.11.2015, 23:30

CSS
1
2
float:left;
float:right;

Использовать эту пару свойств.

Начинаем идти сверху. И все встанет на свои места. Главное не забывать о правилах геометрии.

@Karssen · 18.11.2015, 23:54

http://jsfiddle.net/6ashzfo6/6/

Добавлено через 1 минуту
http://masonry.desandro.com/ Скрипт отсюда

@mrBobrillo · 18.11.2015, 23:56

Karssen Да, об этом я и думал, спасибо, тоже пригодится

@Gerd199 · 20.11.2015, 21:11 **[ТС]**

HTML5
1
<div style="border: 1px solid #dbe4ef; background: #fff; height: 340px; width:270px;"> <span style="border: 1px solid #dbe4ef; padding:3px; width: 68.526px; height: 101.52px; float:left;"></span><span style="border: 1px solid #dbe4ef; padding:3px; width: 27.2403px; height: 40.356px; float:left;"></span><span style="border: 1px solid #dbe4ef; padding:3px; width: 36.666px; height: 54.32px; float:left;"></span><span style="border: 1px solid #dbe4ef; padding:3px; width: 8.8641px; height: 13.132px; float:left;"></span><span style="border: 1px solid #dbe4ef; padding:3px; width: 22.0401px; height: 32.652px; float:left;"></span><span style="border: 1px solid #dbe4ef; padding:3px; width: 13.6431px; height: 20.212px; float:left;"></span><span style="border: 1px solid #dbe4ef; padding:3px; width: 50.031px; height: 74.12px; float:left;"></span><span style="border: 1px solid #dbe4ef; padding:3px; width: 15.039px; height: 22.28px; float:left;"></span><span style="border: 1px solid #dbe4ef; padding:3px; width: 19.872px; height: 29.44px; float:left;"></span><span style="border: 1px solid #dbe4ef; padding:3px; width: 3.24px; height: 4.8px; float:left;"></span><span style="border: 1px solid #dbe4ef; padding:3px; width: 7.182px; height: 10.64px; float:left;"></span><span style="border: 1px solid #dbe4ef; padding:3px; width: 13.419px; height: 19.88px; float:left;"></span><span style="border: 1px solid #dbe4ef; padding:3px; width: 35.559px; height: 52.68px; float:left;"></span><span style="border: 1px solid #dbe4ef; padding:3px; width: 0.378px; height: 0.56px; float:left;"></span><span style="border: 1px solid #dbe4ef; padding:3px; width: 8.7291px; height: 12.932px; float:left;"></span><span style="border: 1px solid #dbe4ef; padding:3px; width: 5.805px; height: 8.6px; float:left;"></span><span style="border: 1px solid #dbe4ef; padding:3px; width: 58.968px; height: 87.36px; float:left;"></span><span style="border: 1px solid #dbe4ef; padding:3px; width: 3.483px; height: 5.16px; float:left;"></span><span style="border: 1px solid #dbe4ef; padding:3px; width: 63.45px; height: 94px; float:left;"></span><span style="border: 1px solid #dbe4ef; padding:3px; width: 18.279px; height: 27.08px; float:left;"></span><span style="border: 1px solid #dbe4ef; padding:3px; width: 25.434px; height: 37.68px; float:left;"></span><span style="border: 1px solid #dbe4ef; padding:3px; width: 42.39px; height: 62.8px; float:left;"></span><span style="border: 1px solid #dbe4ef; padding:3px; width: 27px; height: 40px; float:left;"></span><span style="border: 1px solid #dbe4ef; padding:3px; width: 5.616px; height: 8.32px; float:left;"></span><span style="border: 1px solid #dbe4ef; padding:3px; width: 36.315px; height: 53.8px; float:left;"></span><span style="border: 1px solid #dbe4ef; padding:3px; width: 8.748px; height: 12.96px; float:left;"></span> </div>

Ну вот, смотрите что вышло. Как сделать так, чтобы мол маленькие кубики замещали пустые пространства, а не выстраивались в ряд...?

@Glart · 20.11.2015, 21:20

Для начала ознакомится с этим. И не просто ознакомится, а еще и понять принцип. + погуглить на эту тему. Одно дело написать скрипт, другое дело понять принцип этого.

Судя по изображению принцип вам не ясен.

@Gerd199 · 20.11.2015, 22:10 **[ТС]**

Никак не разберусь, можно своими словами, что не так и как быть? Желательно решить это php кодом...

@Glart · 21.11.2015, 11:38

Сообщение от Gerd199

Желательно решить это php кодом

Тогда что эта тема делает в этом разделе?

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	18.11.2015, 23:21
	На сколько я понимаю, то по ширине все должно стать нормально друг к другу, однако из за разной высоты, а именно по высоте сделать без скрипта не получится, если конечно мне не изменяет память ... 0

@Gerd199 Заблокирован
	18.11.2015, 23:23 [ТС]
	Быть может уже есть какой нибудь готовенький скрипт? 0

@Karssen 152 / 151 / 67 Регистрация: 25.02.2015 Сообщений: 493
	18.11.2015, 23:54
	http://jsfiddle.net/6ashzfo6/6/ Добавлено через 1 минуту http://masonry.desandro.com/ Скрипт отсюда 1

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	18.11.2015, 23:56
	Karssen Да, об этом я и думал, спасибо, тоже пригодится 0

@Glart В поисках себя 115 / 89 / 34 Регистрация: 12.11.2015 Сообщений: 529
	20.11.2015, 21:20
	Для начала ознакомится с этим. И не просто ознакомится, а еще и понять принцип. + погуглить на эту тему. Одно дело написать скрипт, другое дело понять принцип этого. Судя по изображению принцип вам не ясен. 0

@Gerd199 Заблокирован
	20.11.2015, 22:10 [ТС]
	Никак не разберусь, можно своими словами, что не так и как быть? Желательно решить это php кодом... 0

Непростая задача

Решение