时间戳

首页 > 解决方案 > 如何通过 html/css 实现这样的元素

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

问题描述

我需要实现一个像图片上的元素，但我不知道该怎么做。 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;
}

标签： htmlcss

解决方案

在代码笔上玩了一段时间后，我设法在不使用任何 3rd 方库或框架的情况下实现了这一点，只使用了普通的旧 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>

注意：如果您无法运行此代码段，这里有一个工作代码笔。

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

祝你好运。

推荐阅读