Question

我需要实现图片上的元素，但是我不知道该怎么做。 https://image.prntscr.com/image/ipRuSmXpRV2B6RjBj6r07Q.png

我尝试通过来完成此操作，当第一个单元格的年份为年，第二个单元格通过:: before和:: after实现“分隔”，第三个单元格具有描述。但是我的解决方案不起作用。

<table>
    <tr>
        <td class="years">2011 - 2015</td>
        <td>
            <div class="split"></div>
        </td>
        <td class="info">
            Your description gives people the information they need to help you answer your question.
        </td>
    </tr>
</table>

.split {
    margin-left: 50px;
    margin-right: 50px;
}

.split::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: black;
}

.split::after {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    border-left: 1px dashed black;
}

Answer 1

在使用代码笔玩了一会儿之后，我设法不使用任何第三方库或框架，而仅使用普通的旧式HTML和CSS来实现此目的。

figure {
  margin: 0;
  padding: 0;
}

figure > div {
  display: inline-block;
  position: relative;
}

#d2:before {
  width: 1px;
  height: 20px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  vertical-align: middle;
  content: " ";
  z-index: -1;
  background-color: red
}

<figure>
  <div id="d1">This is</div>
  <div id="d2">&bull;</div>
  <div id="d3">Incredible</div>
</figure>

<figure>
  <div id="d1">This is</div>
  <div id="d2">&bull;</div>
  <div id="d3">Incredible</div>
</figure>
 
<figure>
  <div id="d1">This is</div>
  <div id="d2">&bull;</div>
  <div id="d3">Incredible</div>
</figure>

注意：：如果您无法运行此代码段，请使用code pen。

注意：如果某些第1/3兄弟姐妹可能需要修改某些图中红色的高度（可以更改颜色）“边框” 比第二个兄弟大。

祝你好运。

如何通过html / css实现这样的元素

1 个答案: