Html 水平时间线-标签重叠_Html_Css_Timeline

Html 水平时间线-标签重叠

html css

Html 水平时间线-标签重叠,html,css,timeline,Html,Css,Timeline,我正在使用绝对定位的div构建一个水平时间线然而，我有一个问题，当日期太近时，每个div的标签重叠。您可以在下面的Plunker标签1和标签2重叠中看到这一点我需要在一些排序的保证金，但我不知道如何做到这一点，因为宽度的将被动态创建基于某个日期值任何建议都很好 HTML 普朗克你给了100%的主块和总子块应该低于或等于100%，如果超过它将发生，请尝试此代码。。添加以下css： .timeline{ display: table; } .timeline-milestone {

我正在使用绝对定位的div构建一个水平时间线

然而，我有一个问题，当日期太近时，每个div的标签重叠。您可以在下面的Plunker标签1和标签2重叠中看到这一点

我需要在一些排序的保证金，但我不知道如何做到这一点，因为宽度的将被动态创建基于某个日期值

任何建议都很好

HTML

普朗克

你给了100%的主块和总子块应该低于或等于100%，如果超过它将发生，请尝试此代码。。

添加以下css：

.timeline{
  display: table;
}

.timeline-milestone {
  display: table-cell;
  height:10px;
  width: auto;
  text-align:right;
}

将其转换为表格将确保它们不会重叠。显示：表格和表格单元格将自动处理动态宽度

更新后的

您只需更改css并将其放置，它将永远不会覆盖

/* Styles go here */



.timeline-milestone {
 height:10px;
 margin-bottom:20px;
 width:10%;
 text-align:right;
 position:absolute;
}

.one {
margin-left: 0%;
}

.two {
margin-left: 33.5%;
}

.three {
margin-left: 66.5%;
}

.four {
margin-left: 100%;
}

几乎奏效了！问题是，如果你有大约20个标签，不管我怎么想，最后5个或6个左右的标签的宽度都是相同的。如果你有20个标签，你希望宽度是多少…你仍然可以向表格单元格添加自定义宽度。只要它们加起来是100%，它们就不会重叠。

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>

     <div  >
      <table style='width:100%;position:relative'>
        <tr>
          <td style='width:25%;position:relative'>
            <div>
        <div>
          Label One
        </div>
      </div>

          </td>
          <td style='width:25%;position:relative'>
             <div>
        <div>
          Label Two
        </div>
      </div>
          </td>
          <td style='width:25%;position:relative'>
            <div >
        <div >
          Label Three
        </div>
      </div>
          </td>
          <td style='width:25%;position:relative'>
            <div >
        <div >
          Label Four
        </div>
      </div>
          </td>
        </tr>

      </table>

.timeline{
  display: table;
}

.timeline-milestone {
  display: table-cell;
  height:10px;
  width: auto;
  text-align:right;
}

/* Styles go here */



.timeline-milestone {
 height:10px;
 margin-bottom:20px;
 width:10%;
 text-align:right;
 position:absolute;
}

.one {
margin-left: 0%;
}

.two {
margin-left: 33.5%;
}

.three {
margin-left: 66.5%;
}

.four {
margin-left: 100%;
}