1. 首頁
  2. 問答
  3. 將常規寬度間隔下方的文本對齊

將常規寬度間隔下方的文本對齊

2016-06-23 23 views
-1

我創建了一個Angular指令，用戶可以根據一天的時間更改某些設置。下面是什麼我已經有一個畫面：將常規寬度間隔下方的文本對齊

Unfinished element

我想添加一種「滴答」準確反映在DIV的x軸的時間來證明自己在做什麼的用戶，像在下面的圖片：

Finished concept

這些將必須是在它上面的div確切1/24ths。如果有幫助，我可以將div寬度設置爲固定數字。我也希望像圖片中顯示的關鍵時刻。什麼是完成這個最好的方法？

來源

2016-06-23 Fissio

回答

1

我只是想在理論上列出可以工作的一切，這取決於你去試一試。我想嘗試以下步驟（我的解決方案是不是傳統意義上的，但可以工作）：

  1. 對於蜱蟲，我可以嘗試添加24間隔字母「l」或資本我（這曾經將創建帶有空格打勾之間，設置行高和字體到你想要的長度，粗體相關的刻度，然後添加文本對齊：對齊

或者對於更傳統的方法，你可以去一排24列每個1/24寬度使用css，浮動列並添加邊框。

  1. 對於數字，我會添加另一行div的列數等於您想要顯示的次數-1，最後一列有額外的時間顯示在右上角。

  2. 我將每次都添加爲一個強大的元素，並添加相對於父列的位置，並將絕對位置定位在強元素左側-10左右，這使得它們看起來像上面那樣。

希望這會有所幫助。

來源

2016-06-23 09:23:04

0

Flexbox將在這裏工作..而上面的div可以是任何尺寸。

只需添加一個包裝並讓它決定寬度。

Codepen Demo

* { 
 
    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%; 
 
}
<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>

來源

2016-06-23 09:47:27

0

我提供的如何可以實現你的目標基本思路

.time_interval,.line{ 
 
\t \t \t width:100%; 
 
\t \t } 
 
\t \t .line div{ 
 
\t \t \t color:#000; 
 
\t \t \t  float: left; 
 
\t \t \t  height: 5px; 
 
\t \t \t  width: 4%; 
 
\t \t \t  text-align:center; 
 
\t \t } \t 
 
\t \t .line .b{ 
 
\t \t \t font-weight:bold; 
 
\t \t \t color:red; 
 
\t \t } 
 
\t \t .timer div{ 
 
\t \t \t float: left; 
 
\t \t \t text-align:center; 
 
\t \t \t height: 5px; 
 
\t \t \t width: 4%; 
 
\t \t \t padding-top:15px 
 
\t \t } \t
<html> 
 
    <head> 
 
     <title>Test</title> 
 
\t 
 
    </head> 
 
    <body> 
 
\t <div class="line"> 
 
\t \t <div class="b">|</div><div>|</div> 
 
\t \t <div>|</div><div>|</div> 
 
\t \t <div>|</div><div>|</div> 
 
\t \t <div class="b">|</div><div>|</div> 
 
\t \t <div>|</div><div>|</div> 
 
\t \t <div>|</div><div>|</div> 
 
\t \t <div class="b">|</div><div>|</div> 
 
\t \t <div>|</div><div>|</div> 
 
\t \t <div>|</div><div>|</div> 
 
\t \t <div class="b">|</div><div>|</div> 
 
\t \t <div>|</div><div>|</div> 
 
\t \t <div>|</div><div>|</div> 
 
\t \t <div class="b">|</div> 
 
\t </div> 
 
\t <div class="timer"> 
 
\t \t <div>00:00</div><div></div> 
 
\t \t <div></div><div></div> 
 
\t \t <div></div><div></div> 
 
\t \t <div>06:00</div><div></div> 
 
\t \t <div></div><div></div> 
 
\t \t <div></div><div></div> 
 
\t \t <div>12:00</div><div></div> 
 
\t \t <div></div><div></div> 
 
\t \t <div></div><div></div> 
 
\t \t <div>18:00</div><div></div> 
 
\t \t <div></div><div></div> 
 
\t \t <div></div><div></div> 
 
\t \t <div>00:00</div> 
 
\t </div> 
 
    </body>  
 
</html>

來源

2016-06-23 11:02:51 Amit

相關問題

 相關問題