使用CSS和JQuery繪製垂直線

我正在創建一個水平時間軸，除了從子彈到水平線繪製垂直線外，我還解決了大部分問題。使用CSS和JQuery繪製垂直線

我想要實現的是將even和odd類的子彈連接到中間的水平線。由於高度和div.even和div.odd的寬度可能是不同的，我想我需要使用jQuery知道垂直線的適當高度，以每個div.even和div.odd

這是我的工作

.timeline-container { 
 
    position: relative; 
 
    min-height: 300px; 
 
    margin-bottom: 30px; 
 
} 
 

 
.timeline-container .odd, .timeline-container .even { 
 
    position: relative; 
 
    display: inline-block; 
 
    font-size: 10px; 
 

 
    
 
} 
 

 

 
.odd { 
 
    padding-bottom:1px; 
 
    
 
} 
 

 
.even:before { 
 
    content: "\2219 "; 
 
    width: 50px; 
 
    position:relative; 
 
    left: 50%; 
 
} 
 

 
.odd:after { 
 
    content: "\2219"; 
 
    position: relative; 
 
    left:50%; 
 
} 
 

 
.even { 
 
    top: 200px; 
 
    
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<section class="timeline"> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-lg-12 text-center"> 
 
     <h1>Timeline</h1> 
 
     
 
     </div> 
 
    </div> 
 
    
 
    <div class="row"> 
 
     <div class="col-lg-12"> 
 
     
 
     
 
     <div class="timeline-container"> 
 
      
 
      <hr style="position:absolute; top: 40%; border:1px solid #717171; width:100%"/> 
 
      
 
      <div style="position: absolute; left:416px; top:77px; border-left: 1px solid black; "> 
 
      
 
      </div> 
 
      <div class="odd"> 
 
      <h5>Year 2014</h5> 
 
      </div> 
 
      
 
      <div class="even"> 
 
      <h4>March 2015 achievement</h4> 
 
      <p>Short description that best describe the event</p> 
 
      </div> 
 
      
 
      <div class="odd test"> 
 
      <h4>March 2015 achievement</h4> 
 
      <p>Short description that best describe the event</p>   
 
      </div> 
 
      
 
      <hr width="1" size="100" style="position: absolute; border:1px solid #717171;z-index:20" > 
 
      
 
      <div class="even"> 
 
      <h4>March 2015 achievement</h4> 
 
      <p>Short description that best describe the event</p> 
 
      </div>   
 
      
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

https://jsfiddle.net/7ajbvgcj/

我將嘗試繪製垂直線使用hr通過設置寬度爲1和大小爲我想要的高度，但它似乎不工作。

<hr width="1" size="100" style="position: absolute; left: 30px; top: 30px; border:1px solid #717171;z-index:20" >

任何提示？

感謝

來源

2016-01-18 geckob

你說「用CSS」，但你的問題只包含HTML和一個鏈接。與您的問題相關的任何代碼，標記等必須**在您的問題中，而不僅僅是關聯。鏈接腐爛，使問題及其答案在未來的人們中毫無用處，人們不應該離開現場去幫助你。如果問題沒有意義，沒有鏈接就無法回答，這個網站不適合。相反，在**問題中（理想情況下使用支持CSS和HTML的Stack Snippets ['>'toolbar button]]，將[** minimum ** complete example]（/ help/mcve）。 –

你有任何img來展示你想在這裏實現的目標嗎？ – Venugopal

你爲什麼試圖繪製垂直線與設計爲水平佈局的元素？當然，這只是向運行時間線全高的元素添加邊框的情況？ –

-1

 div { 
 
      min-height:300px; 
 
      border-left: 1px solid black; 
 
     }

將這個CSS用於小時，這將是一條垂直線。請檢查並回復

來源

2016-01-18 10:08:45

-1

爲什麼選擇HR？只需使用div和絕對位置即可：

div.class { 
    position: absolute; 
    top:0; left:0; 
    min-height:300px; 
    border-left: 1px solid black; 
}

hr只會使事情複雜化。它是作爲一個水平的統治者，因此名稱<hr>。

來源

2016-01-18 10:15:51 Rinon

＃Rinon-我們可以更好地只有最小高度：300px; border-left：1px純黑色; –

使用CSS和JQuery繪製垂直線

回答

相關問題