我想在twitter中绘制垂直线

Question

我正在建立一个推特克隆，我想绘制一个垂直线，就像这个推特link中心显示的两个图像之间，恰好在两个单独的<div>

我试过：<div class="vertical-line"></div>后的<div>

.vertical-line {
    border-width: 2px;
    border-top-left-radius: 2px;
    border-color: #1da1f2;
    border-style: solid;
}

结果就像this

Answer 1

使用CSS创建垂直线的最简单方法是在带有指定border-left的空div中使用height。正如在评论中提到的那样，你将需要使用JS来确定height类的.line，具体取决于图像之间的距离，因为你没有预先确定这个值，但是这段代码的其余部分将按原样运行。

img {
    border-radius: 50%;
    margin: 5px;
}

.line {
    position: relative;
    bottom: 2px;
    left: 38px;
    border-left: 6px solid red;
    height: 85px;
}

<img src="https://pbs.twimg.com/profile_images/1113436678050316289/t-Agpngx_bigger.jpg">
<div class="line"></div>
<img src="https://pbs.twimg.com/profile_images/1113436678050316289/t-Agpngx_bigger.jpg">

您也可以使用伪元素选择器来创建垂直线，但是如果没有看到确切的代码，使用此方法很难给出具体的答案。

Answer 2

我只是写了一个基本的列表代码，它们完全依赖于内容。如果内容增加左栏也增加。试试这个我希望它会帮助你。谢谢

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

li {
  display: flex;
  height: auto;
  overflow: hidden;
}

li:last-child .line {
  display: none;
}

.avatarWrap {
  display: flex;
  flex-direction: column;
  width: 28px;
}

.avatarWrap .circle {
  background-color: #ccc;
  border: 3px solid #fff;
  border-radius: 25px;
  display: block;
  flex-shrink: 0;
  position: relative;
  height: 22px;
  width: 22px;
}

.avatarWrap .line {
  background-color: #ccc;
  border-radius: 3px;
  content: '';
  display: block;
  flex: 1;
  height: 100%;  
  margin-left: 11px;
  width: 5px;
}

.content {
  font-size: 12px;
  margin: 8px 0 0 20px;
}

<ul>
  <li>
    <div class="avatarWrap">
      <span class="circle"></span>
      <span class="line"></span>
    </div>
    <div class="content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </li>
  <li>
    <div class="avatarWrap">
      <span class="circle"></span>
      <span class="line"></span>
    </div>
    <div class="content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </li>
  <li>
    <div class="avatarWrap">
      <span class="circle"></span>
      <span class="line"></span>
    </div>
    <div class="content">
      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form,
    </div>
  </li>
  <li>
    <div class="avatarWrap">
      <span class="circle"></span>
      <span class="line"></span>
    </div>
    <div class="content">
      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form,
    </div>
  </li>
</ul>