代码之家 › 专栏 › 技术社区 › catandmouse

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

css3 css

catandmouse · 技术社区 · 6 年前

目前,我有以下代码:

.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 回复 | 直到 6 年前

Anji 6 年前

添加 溢出:隐藏

.icon:after {
   height:1000px;
}

div{
   overflow:hidden;
}

希望这对你有帮助。

Dominik Roberto C Dl Garza 6 年前

事实上,我只是在几天的时间里实现了类似的东西 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

Vikas Jadhav 6 年前

检查下面的代码片段

  
/* 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>