我想像推特一样画垂直线答案

【问题标题】：I want to draw vertical line like in twitter我想像推特一样画垂直线
【发布时间】：2019-09-04 02:44:33
【问题描述】：

我正在构建一个 twitter 克隆，我想画一条垂直线，就像这条 twitter 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

【问题讨论】：

你试过什么？无论哪种方式，它似乎更像是一个 JavaScript 解决方案而不是 CSS。 CSS 仅用于设置值 - 但您需要 JS 来确定每个给定元素/评论之间的距离
我很难让它垂直并位于图像下方
请编辑您的问题并添加您尝试过的内容，以便我们为您提供帮助
看起来他们在帖子正文的::after 伪元素上有一个边框，带有一些偏移量。
我编辑了这个问题，有什么帮助吗？

标签： css bootstrap-4

【解决方案1】：

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

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>

【讨论】：

你能在圆圈和文本之间添加边距吗？我很难做到这一点
@AbdulrahmanKhaled 我刚刚更新了上面代码 sn-p 中的content 边距。我看到了你的 codepen 干得好，继续努力....

【解决方案2】：

仅使用 CSS 创建垂直线的最简单方法是在空的div 中使用border-left 并指定height。正如 cmets 中提到的 tkore，您将需要使用 JS 来确定 .line 类的 height，具体取决于图像之间的距离，因为您不会预先确定该值，但此代码的其余部分将起作用照原样。

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">

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

【讨论】：