Блог

Главная - Вопросы по программированию - Как мне сделать вертикальный разделитель равным и начать с той же вершины с переменным содержимым в CSS

Как мне сделать вертикальный разделитель равным и начать с той же вершины с переменным содержимым в CSS

#html #css

#HTML #css

Вопрос:

Скрипка здесьhttps://jsfiddle.net/7x0kej46/3 /

 <section>
  <div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun
  </div>
   <div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehender
  </div>
   <div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
   <div>
  TEST
  </div>
   <div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>

section div {
  background: tomato;
  padding: 1rem;
  margin-bottom: 1rem;
  color: white;
  position: relative;
}

section div::after {
  content: '';
  border-right: 2px solid #555;
  width: 2px;
  z-index: 1;
  position: absolute;
  left: 5px;
  top: 50%;
  height: 100%;
}

section div:last-child::after {
  display: none;
}

введите описание изображения здесь

Желаемый результат (добавлена лучшая картинка для понимания)

введите описание изображения здесь

Комментарии:

1. Вы видите вертикальную линию слева?? Для div с фиксированной высотой можно сделать так, чтобы строка начиналась и заканчивалась в одних и тех же точках, жестко закодировав свойства height, top и left. Но когда содержимое div не фиксировано из-за изменения содержимого, тогда это сложно, вы понимаете мою точку зрения. ?

2. Уверен, что вам понадобится JS для этого, чтобы определить высоту следующего div.

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

4. Итак, вы хотите, чтобы строки начинались с середины первого элемента, и чтобы они доходили до следующего элемента на определенное количество пикселей (или rem, или что-то в этом роде)? Затем удалите height и укажите bottom: -2rem или что-то в этом роде.

5. (И в следующий раз, пожалуйста, используйте свои слова , чтобы точно объяснить, что вы хотите, вместо того, чтобы просто указывать картинки.)

Ответ №1:

Используйте псевдоэлементы, которые встречаются в нужной точке … один на предыдущем div и один на следующем.

 section div {
  background: tomato;
  padding: 1rem;
  margin-bottom: 1rem;
  color: white;
  position: relative;
}

section div::after {
  content: '';
  border-right: 5px solid #555;
  z-index: 1;
  position: absolute;
  left: 5px;
  top: 50%;
  height: calc(50%   .5em);
}

section div::before {
  content: '';
  border-right: 5px solid #555;
  z-index: 1;
  position: absolute;
  left: 5px;
  height: calc(50%   .5em);
  bottom: 50%;
}

section div:last-child::after {
  display: none;
}

section div:first-child::before {
  display: none;
}  
 <section>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehender
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div>
    TEST
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>

Ответ №2:

Я думаю, что это хорошая основа для начала в соответствии с вашим дизайном:

 section div {
  background: tomato;
  padding: 1rem;
  margin-bottom: 1rem;
  color: white;
  position: relative;
  padding-left: 3rem;
}

section div::after {
  content: '';
  border-right: 2px solid #555;
  width: 2px;
  z-index: 1;
  position: absolute;
  left: 12px;
  top: 35px;
  height: calc(100% - 10px);
}


section div::before {
  content: '';
  background: green;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  z-index: 1;
  position: absolute;
  left: 5px;
  top: 11px;
}

section div:last-child::after {
  display: none;
}  
 <section>
  <div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun
  </div>
   <div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehender
  </div>
   <div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
   <div>
  TEST
  </div>
   <div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>

Ответ №3:

Я нарисовал одну строку, используя псевдоэлемент section, затем поместил значок, используя псевдоэлемент дочернего элемента div.

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

 section{
  position:relative;
}
section:before{
  content:"";
  width:2px;
  height:100%;
  position:absolute;
  left:15px;
  background-color:black;
  z-index:1;
}

section div {
  background: #ccc;
  padding: 1rem 1rem 1rem 3rem;
  margin-bottom: 1rem;
  color: white;
  position: relative;
}
section div:before {
   content:"-";
  width:20px;
  height:20px;
  position:absolute;
  left:1px;
  top:15%;
  background-color:#fff;
  border-radius:100%;
  z-index:3;
  text-align:center;
  font-size:20px;
  font-size: 28px;
   line-height: 16px;
  border: 5px solid #ccc;
      transform: rotate(-50deg);
      background-color:red;
      color:#fff;
}
section div:nth-child(2):before {
  content:"✔";
  font-size:14px;
  line-height:20px;
  background-color:green;
      transform: rotate(0deg);
}

section div:first-child:after,section div:last-child:after {
  content:"";
  width:2px;
  height:15%;
  position:absolute;
  left:15px;
  top:0;
  background-color:#ccc;
  z-index:2;
}
section div:last-child:after {
  top:auto;
  bottom:0;
  height:85%;
}  
 <section>
  <div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun
  </div>
   <div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehender
  </div>
   <div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
   <div>
  TEST
  </div>
   <div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>