Я разрабатываю элемент управления, предназначенный для отображения блоков активности в сетке календаря. Это простой JavaScript/CSS, основанный на jQuery для манипуляций с DOM и т.д. Вот изображение:
Существуют группы A и B, каждая из которых содержит пару блоков активности ([1,2], [3,4]). Действия могут либо накладываться, либо последовательно следовать друг за другом. Моя цель - разместить блоки активности соответственно: если действия перекрываются, как [1,2], я хочу, чтобы они обертывались и сидели друг над другом, как на фото; если они последовательны, как [3,4], я хочу их рядом друг с другом, НЕ нравится на фото.
Кроме того, я бы хотел, чтобы высота полосы (A, B) настраивалась автоматически. Таким образом, полоса с перекрывающимися блоками активности имела бы вдвое большую высоту полосы с последовательными.
В этот момент я могу получить либо тот, и другой.
Если в блоках активности есть display: block;
, действия завершаются независимо от того, перекрываются ли они (3,4). Высота полосы регулируется соответствующим образом.
Если блоки активности имеют display: inline-block;
, действия имеют одинаковую высоту, поэтому вы спрятаны другим (1,2). Полоса остается в одном блоке активности по высоте.
Все есть div
, и вот соответствующий HTML/CSS:
<div class="band">
<div class="activity-block" style="left: 331.429px; width: 11.4286px;"></div>
<div class="activity-block" style="left: 160px; width: 297.143px;"></div>
</div>
<div class="band">
<div class="activity-block" style="left: 205.714px; width: 22.8571px;"></div>
<div class="activity-block" style="left: 365.714px; width: 3417.14px;"></div>
</div>
<div class="band"></div>
Диапазоны (A, B):
.band {
min-height: 20px;
}
Блоки активности (1,2,3,4):
.activity-block {
background-color: #66C6C2;
border-radius: 3px;
display: block;
height: 20px;
margin-bottom: 5px;
margin-top: 5px;
position: relative;
}
left
и width
блока активности заданы из JavaScript.
Я хотел бы получить там, используя только два класса CSS, один для группы и один для блоков активности. Я понимаю, что цель может быть достигнута с помощью JavaScript, но мне интересно, возможно ли это только с помощью CSS.