Question

我正在使用绝对定位的div构建水平时间轴。

但是我遇到的问题是，当日期太靠近时，每个div的标签会重叠。您可以在下面的Plunker中看到这一点（标签1和标签两个重叠）

https://plnkr.co/edit/fhff4V6Zo8ko2Sllv2DZ?p=preview

我需要设置某种余量，但是我不知道如何动态创建宽度（基于某个日期值）

任何建议都会很棒！

HTML

<div class='timeline' style='width:100%;position:relative'>

      <div class='one timeline-milestone'>
        <div class='timeline-label'>
          Label One
        </div>
      </div>

      <div class='two timeline-milestone'>
        <div class='timeline-label'>
          Label Two
        </div>
      </div>

      <div class='three timeline-milestone'>
        <div class='timeline-label'>
          Label Three
        </div>
      </div>

      <div class='four timeline-milestone'>
        <div class='timeline-label'>
          Label Four
        </div>
      </div>
</div>

CSS

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

.one {
width:10%;  
}

.two {
width:15%;
}

.three {
width:50%;
}

.four {
  width:90%;
}

Plunker

https://plnkr.co/edit/fhff4V6Zo8ko2Sllv2DZ?p=preview

Answer 1

添加以下css：

.timeline{
  display: table;
}

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

将其转换为表将确保它们永远不会重叠。 display：table和table-cell将自动处理动态宽度。

更新了plunker

Answer 2

你给主块100％，总子块低于或等于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>

Answer 3

你可以改变你的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%;
}

水平时间轴 - 标签重叠

3 个答案: