Question

我正在构建一个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

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>

我想在Twitter中绘制垂直线

2 个答案: