Question

我创建了一个Angular指令，用户可以根据当天的时间更改某些设置。下面是我已经拥有的图片：

我想添加一些＆＃34; ticks＆＃34;准确地表示div的x轴上的时间，以向用户显示他正在做什么，如下图所示：

这些必须是它上方div的1/24。如果有帮助，我可以将div宽度设置为固定数字。我也希望关键时间如图所示。什么是实现这一目标的最佳方式？

Answer 1

我只是在理论上列出什么可行，你可以尝试一下。我会尝试以下步骤（我的解决方案不是传统的，但可以工作）：

对于刻度线，我可以尝试添加24个间隔字母＆＃39; l＆＃39;或者资本I（它会创建一个带有空格的刻度线，将行高和字体设置为您想要的长度，加粗相关的刻度，然后添加text-align：justify。

或者对于更传统的方法，您可以使用css为每行包含24列，每行1/24宽度，浮动列并添加边框。

对于数字，我会添加另一个行div，其列数等于您想要显示的时间-1，最后一列有额外的时间显示在右上角。
我会将每次添加为一个强元素并添加相对于父列的位置，并将绝对位置设置为强元素，将它们放在-10左右，这样它们就像上面一样。
< / LI>
希望这有帮助。

Answer 2

Flexbox可以在这里工作......上面的div可以是任何大小。

只需添加一个包装器，然后确定宽度。

Codepen Demo

＆＃13;

* {
  box-sizing: border-box;
}
.parent {
  display: flex;
  flex-direction: column;
  margin: 1em auto;
  width: 80%;
}
.object {
  width: 100%;
  height: 150px;
  background: pink;
  display: flex;
}

.block {
  width: 25%;
  background: lightblue;
}
.ticks {
  height: 15px;
  display: flex;
  justify-content: space-between;
}
.tick {
  width: 2px;
  height: 100%;
  background: grey;
  position: relative;
}

.tick.major {
  background:red;
  width:2px;
  }
.time {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 80%;
}

＆＃13;

<div class="parent">
  <div class="object">
  <div class="block"></div>
  </div>
  <div class="ticks">
    <div class="tick major">
      <div class="time">00:00</div>
    </div>
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick major">
      <div class="time">06:00</div>
    </div>
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick major">
      <div class="time">12:00</div>
    </div>
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick major">
      <div class="time">18:00</div>
    </div>
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick"></div>
    <div class="tick major">
      <div class="time">00:00</div>
    </div>
  </div>
</div>

＆＃13;

Answer 3

我提供了如何实现目标的基本想法

.time_interval,.line{
			width:100%;
		}
		.line div{
			 color:#000;
			    float: left;
			    height: 5px;
			    width: 4%;
			    text-align:center;
		}	
		.line .b{
			font-weight:bold;
			color:red;
		}
		.timer div{
			float: left;
			text-align:center;
			height: 5px;
			width: 4%;
			padding-top:15px
		}

<html>
    <head>
        <title>Test</title>
	
    </head>
    <body>
	<div class="line">
		<div class="b">|</div><div>|</div>
		<div>|</div><div>|</div>
		<div>|</div><div>|</div>
		<div class="b">|</div><div>|</div>
		<div>|</div><div>|</div>
		<div>|</div><div>|</div>
		<div class="b">|</div><div>|</div>
		<div>|</div><div>|</div>
		<div>|</div><div>|</div>
		<div class="b">|</div><div>|</div>
		<div>|</div><div>|</div>
		<div>|</div><div>|</div>
		<div class="b">|</div>
	</div>
	<div class="timer">
		<div>00:00</div><div></div>
		<div></div><div></div>
		<div></div><div></div>
		<div>06:00</div><div></div>
		<div></div><div></div>
		<div></div><div></div>
		<div>12:00</div><div></div>
		<div></div><div></div>
		<div></div><div></div>
		<div>18:00</div><div></div>
		<div></div><div></div>
		<div></div><div></div>
		<div>00:00</div>
	</div>
    </body>    
</html>

以正常宽度间隔对齐div下面的文本

3 个答案: