Разметка разделов либо с оберткой, либо рядом друг с другом, используя только CSS

Я разрабатываю элемент управления, предназначенный для отображения блоков активности в сетке календаря. Это простой 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.

Ответы

Ответ 1

Как отмечают пользователи, в CSS нет способа сделать это. CSS работает, пусть называет его "строками". То, что вы пытаетесь достичь, состоит в том, чтобы основываться на содержимом какого-либо условия в одной или двух строках, это то, что CSS не может обрабатывать. Вы можете указать только поведение контента в своей строке. Самое близкое, что вы можете получить, это определить элементы как встроенный блок с правильным левым заполнением, если они не перекрываются и блокируются, когда они есть, но вы не можете этого сделать, не используя JavaScript для обработки логики.

Ответ 2

Посмотрите, подходит ли это вашим требованиям: вы хотите установить позиции в javascript и позволить css разрывать линии для вас, если есть перекрытие, правильно?

Идея состоит в том, чтобы каждый блок плавал в одну сторону и устанавливал поля с вашим кодом javascript. Но группа div должна быть плавающей, иначе она не вырастет, чтобы разместить разрывы строк, которые случаются в случае перекрытия (больше на этом в плавающие элементы в div, плавает за пределами div. Почему?).

<html>
<head>
    <style>
        .activity-block {
            background-color: #66C6C2;
            border-radius: 3px;
            height: 20px;
            margin-bottom: 5px;
            margin-top: 5px;
        }
        .band {
            min-height: 30px;
            border: solid 1px;
            width: 1200px;
            float: left;
        }
        .fl {
            float: left;
        }
        .fr {
            float: right;
        }
    </style>
</head>
<body>
    <div class="band">
        <div class="activity-block fl" style="margin-left: 331px; width: 81px;">1</div>
        <div class="activity-block fr" style="margin-right: 160px; width: 497px;" id="x2">2</div>
    </div>
    <div class="band">
        <div class="activity-block fl" style="margin-left: 205px; width: 22px;">3</div>
        <div class="activity-block fr" style="margin-right: 365px; width: 417px;" id="x4">4</div>
    </div>
</body>

Я сделал jsFiddle для тестирования:

https://jsfiddle.net/vdusch4y/6/

Некоторые ограничения, которые необходимо проверить:

Не более 2 блоков на группу.
Второй блок в div поместится вправо и представляет собой действие, которое начинается после первого.
Вместо того, чтобы устанавливать влево в вашем javascript, вы устанавливаете margin-right второго блока внутри каждого диапазона в соответствии с: (margin-right) = (band ширина) - (расчетный блок слева) - (расчетная ширина блока). Для симметрии я использую margin (слева в случае) для первого блока.

В примере jsFiddle попробуйте изменить ширину полосы или разделите поля/ширину, чтобы увидеть, как происходит разрывы, оставляя полосу с большей высотой.

Надеюсь, что это поможет!

Ответ 3

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

.band {
 position: relative;
}
.activity-block {
 position: absolute;
}

Ответ 4

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

КОД HTML:

<div class="band column">
  <div >one</div>
  <div  style="margin-left:130px">two</div>
  <div  style="margin-left:30px">three</div>
</div>
<div class="band row">
  <div>one</div>
  <div>two</div>
  <div>three</div>
</div>

CSS:

.band {
      display: -webkit-flex;
    display: flex;
    background-color: white;
      align-items: flex-start;
    border:1px solid black;
}
.band.row{-webkit-flex-direction: row; flex-direction: row;}
.band.column{-webkit-flex-direction: column; flex-direction: column;}
.band div{background-color: cornflowerblue;
    max-width: 100%;
    height: 100px;
    margin: 10px;}
.band div:nth-child(1){background-color: #009688;width:130px;}
.band div:nth-child(2){background-color: #0000FF;width;50px}
.band div:nth-child(3){background-color: #990000;width:200px}

Различия в действиях, которые я использовал, различают цвет фона.

Вы можете проверить демонстрацию Fiddle