如何在两个div之间创建一条灵活的垂直线？

时间：2018-09-25 04:17:29

标签： css css3

如何在两个div之间创建一条线，根据其与下一个div之间的距离自动调整其高度？当前，当div仅是单线时看起来不错，但是当div的高度根据内容而变化时，该行会中断。

enter image description here

当前，我有以下代码：

.icon {
    flex-grow: 0;
    flex-shrink: 0;
    margin-right: 20px;
    height: 50px;
    display: flex;
    align-items: center;
    position: relative;
}

.icon:after {
    position: absolute;
    content: "";
    width: 2px;
    height: 40px;
    top: 58px;
    left: 23px;
    border-left: 2px dashed #CCC;
}

3 个答案:

答案 0 :(得分：0)

实际上，我几天才在https://designsystemmeetup.com/v1.0.0/上实现了类似的功能

此处简化的实现： https://codepen.io/dominikwilkowski/pen/KxjPGg

请注意，在我的实现中，图片设置为顶部而不是中间... 

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  position: relative;
  padding-left: 4.8rem;
  padding-bottom: 1.5rem;
}

li:after {
  position: absolute;
  content: '';
  width: 1px;
  height: 100%;
  border-left: 3px solid #cccccc;
  left: 1.75rem;
  top: 0;
  z-index: 1;
}

img {
  position: absolute;
  left: 0.2rem;
  top: 0;
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50%;
  z-index: 2;
}
<ul>
  <li>
    <img src="https://via.placeholder.com/100x100">
    <h2>Headline</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ea iure alias, vitae a vel fugit numquam quidem iusto est eos hic impedit ex odit
      maiores. Sequi earum aspernatur, dignissimos! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus harum et, cumque illum in, fuga
      inventore quo dolore alias atque natus nesciunt, excepturi ducimus ullam laborum. Ratione explicabo, eaque tempora. Lorem ipsum dolor sit amet,
      consectetur adipisicing elit. Aliquid, saepe ratione illo, ab deleniti ex, eius similique soluta impedit molestiae quod possimus aliquam. Provident,
      ipsam. Praesentium commodi, laboriosam ex aperiam.
    </p>
  </li>
  <li>
    <img src="https://via.placeholder.com/100x100">
    <h2>Headline 2</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ea iure alias, vitae a vel fugit numquam quidem iusto est eos hic impedit ex odit
      maiores. Sequi earum aspernatur, dignissimos!
    </p>
  </li>
  <li>
    <img src="https://via.placeholder.com/100x100">
    <h2>Headline 3</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ea iure alias, vitae a vel fugit numquam quidem iusto est eos hic impedit ex odit
      maiores. Sequi earum aspernatur, dignissimos! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus harum et, cumque illum in, fuga
      inventore quo dolore alias atque natus nesciunt, excepturi ducimus ullam laborum. Ratione explicabo, eaque tempora. Lorem ipsum dolor sit amet,
      consectetur adipisicing elit. Aliquid, saepe ratione illo, ab deleniti ex, eius similique soluta impedit molestiae quod possimus aliquam. Provident,
      ipsam. Praesentium commodi, laboriosam ex aperiam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ea iure alias, vitae a vel fugit
      numquam quidem iusto est eos hic impedit ex odit maiores. Sequi earum aspernatur, dignissimos! Lorem ipsum dolor sit amet, consectetur adipisicing
      elit. Repellendus harum et, cumque illum in, fuga inventore quo dolore alias atque natus nesciunt, excepturi ducimus ullam laborum. Ratione explicabo,
      eaque tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, saepe ratione illo, ab deleniti ex, eius similique soluta impedit
      molestiae quod possimus aliquam. Provident, ipsam. Praesentium commodi, laboriosam ex aperiam.
    </p>
  </li>
</ul>

答案 1 :(得分：0)

为div添加 overflow：hidden 。并增加线的高度。

.icon:after {
   height:1000px;
}

div{
   overflow:hidden;
}

希望这对您有所帮助。

答案 2 :(得分：-1)

检查以下代码段

  
/* Base */
  

 body{
     background:#252827;
   }
#content {
  margin-top: 50px;
  text-align: center;
}
/* Timeline */
.timeline {
  border-left: 4px solid #004ffc;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Chivo', sans-serif;
  margin: 50px auto;
  letter-spacing: 0.5px;
  position: relative;
  line-height: 1.4em;
  font-size: 1.03em;
  padding: 50px;
  list-style: none;
  text-align: left;
  font-weight: 100;
  max-width: 30%;
}
.timeline h1 {
  font-family: 'Saira', sans-serif;
  letter-spacing: 1.5px;
  font-weight: 100;
  font-size: 1.4em;
}
.timeline h2,
.timeline h3 {
  font-family: 'Saira', sans-serif;
  letter-spacing: 1.5px;
  font-weight: 400;
  font-size: 1.4em;
}
.timeline .event {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
  padding-bottom: 25px;
  margin-bottom: 50px;
  position: relative;
}
.timeline .event:last-of-type {
  padding-bottom: 0;
  margin-bottom: 0;
  border: none;
}
.timeline .event:before,
.timeline .event:after {
  position: absolute;
  display: block;
  top: 0;
}
.timeline .event:before {
  left: -217.5px;
  color: rgba(255, 255, 255, 0.4);
  content: attr(data-date);
  text-align: right;
  font-weight: 100;
  font-size: 0.9em;
  min-width: 120px;
  font-family: 'Saira', sans-serif;
}
.timeline .event:after {
  box-shadow: 0 0 0 4px #004ffc;
  left: -57.85px;
  background: #313534;
  border-radius: 50%;
  height: 11px;
  width: 11px;
  content: "";
  top: 50%;
}
<div id="content">
 
  <ul class="timeline">
    <li class="event" >
      <h3>Dinosaurs Roamed the Earth</h3>
      <p>RAWWWWWWRRR.</p>
    </li>
    <li class="event" >
      <h3>Creative Component Launched</h3>
      <p>Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>    
    </li>
    <li class="event">
      <h3>Squareflair was Born</h3>
      <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.</p> <p>Get ready!</p>    
    </li>
    <li class="event" >
      <h3>Squareflair Today</h3>
      <p>Our success can be measured by lives changed and enhanced by more than eight years of Squarespace-focused service.</p>    
    </li>
  </ul>
</div>

相关问题
最新问题