CSS show line будет фильтровать

Question

Я использовал пример макета временной шкалы, как вы можете видеть в JSFiddle. Я добавил кнопки фильтра, и когда я их использую, линия в середине обрезается. Может ли кто-нибудь помочь мне с этим?

См:

https://jsfiddle.net/tc2axpkf/11/ Нажмите на кнопку TEST или GROEP и увидите, что линия посередине обрезается.

.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content:" ";
width: 2px;
background: #ffffff;
left: 50%;
margin-left: -1.5px;
}

Answer 1

Вы имеете дело с плавающими элементами, которые необходимо очистить.

 .timeline {
    list-style: none;
    padding: 10px 0;
    position: relative;
    font-weight: 300; 
    overflow:hidden; /* should be enough */
}

см. Информацию: https://css -tricks.com / all-about-float / # article-header-id-4

Если вы находитесь в ситуации, когда вы всегда знаете, каким будет следующий элемент, вы можете применить ясность: оба; цените этот элемент и займитесь своим делом. Это идеально, так как не требует никаких модных хаков и дополнительных элементов, что делает его совершенно семантическим. Конечно, обычно все не так, и нам нужно иметь больше инструментов для очистки поплавков в нашем наборе инструментов.

В вашем случае вы можете использовать:

Метод переполнения

Метод переполнения основан на установке свойства CSS переполнения для родительского элемента. Если это свойство установлено на auto или скрыто в родительском элементе, родительский объект расширится, чтобы содержать числа с плавающей запятой, эффективно очистив его для последующих элементов. Этот метод может быть красиво семантическим, поскольку он может не требовать дополнительных элементов. Однако, если вы обнаружите, что добавляете новый div только для того, чтобы применить его, он в равной степени несемантичен, как пустой метод div, и менее адаптируем. Также имейте в виду, что свойство overflow не предназначено специально для очистки поплавков. Будьте осторожны, чтобы не скрыть содержимое и не вызвать нежелательные полосы прокрутки.

Answer 2

Как я вижу, раздел .timeline-inverted удален из домена. После этого ваш .timeline разрушается из-за плавающих элементов.

Попробуйте добавить исправление:

.timeline:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}