HTML CSS otomatik olarak yükseklik ayarını

Question

CSS/LESS kullanarak görselleştirerek giden ve gelen uçuşları görüntülemeye çalışıyorum. Sorun şu ki, Outbound uçuşu daha fazla havalimanı değişimine sahipse Inbound sonra hat ilk uçuş seviyesinde kalır. Hat uzunluğunu dinamik olarak en uzun rotaya göre ayarlamak istiyorum.

Gerekli sonuçları nasıl elde edeceğimi anlamaya yardımcı olabilir misiniz?

GÜNCELLEME:

Bu benim çalışıyorum budur: Hazırlanan Plunker örneği (düzgün görmek için daha geniş bir ekran yapmak)

Bu bende ne olduğunu da arşiv:

AZ:

.time-slice { 
    position: relative; 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-align: stretch; 
    -webkit-align-items: stretch; 
    -ms-flex-align: stretch; 
    align-items: stretch; 
    margin-left: 20px; 
} 

.time-slice > * { 
    padding: 20px; 
} 

.circle { 
    width: 16px; 
    height: 16px; 
    box-sizing: content-box; 
    border-color: #29a8bb; 
    background: #ffffff; 
    border-radius: 32px; 
    display: block; 
    border: 2px solid blue; 
} 
.circle-wrap { 
    position: absolute; 
    top: 0px; 
    left: 91px; 
    z-index: 2; 
} 
.circle-wrap > .circle { 
    position: relative; 
    left: 20px; 
} 
.date-time { 
    box-sizing: content-box; 
    -webkit-flex-shrink: 0; 
    -ms-flex-negative: 0; 
    flex-shrink: 0; 
    -webkit-flex-basis: 100px; 
    -ms-flex-preferred-size: 100px; 
    flex-basis: 100px; 
    text-align: center; 
    margin-top: -5px; 
} 
.date, 
.time { 
    max-width: 90px; 
    color: #999999; 
    font-size: 13px; 
    margin-top: 0px; 
    margin-bottom: 10px; 
    margin-left: 20px; 
} 


.time-slice.row:not(:last-child) .point-title { 
    border-left: 2px solid blue; 
    padding-left: 15px; 
    padding-top: 0; 
    position: relative; 
    top: 20px; 
} 


.duration { 
    margin-left: 50px; 
    max-width: 90px; 
    color: #999999; 
    font-size: 13px; 

    margin-bottom: 10px; 
} 




.stop-transit { 
    border-width: 2px; 
    color: red; 
    padding-left: 5px; 
    margin-left: 20px; 
    margin-bottom: 10px; 
    table-layout: fixed; 
} 

.stop-transit, .transit-path, .wait-time{ 
    padding-right: 10px; 
    padding-left: 20px; 
} 

.transit-path { 
    border-right-style:dotted; 
    width: 140px; 
} 


.wait-reason{ 
    text-align: center; 
} 

.searchResult{ 
    padding: 0px 15px; 
} 

HTML: sadece flexbox'a çığlıklar

<div id="{{ticket.id}}" style="display:none"> 
      <div class="col-md-6 line"> 
       <h3>OUTBOUND</h3> 
       <div ng-repeat="departureFlight in ticket.route.departureFlights"> 

        <div class="timeline"> 
         <div class="time-slice row"> 
          <div class="date-time"> 
           <p class="date">{{departureFlight.departureTime | date:"EEE d MMM"}}</p> 
           <p class="time">{{departureFlight.departureTime | date:"h:mma"}}</p> 
          </div> 
          <div class="circle-wrap"> 
           <div class="circle"></div> 
          </div> 
          <div class="point-title"> 
           <span> 
            <b>{{departureFlight.cityFrom}} ({{departureFlight.flyFrom}})</b> 
           </span> 
          </div> 
         </div> 

         <div class="time-slice row"> 
          <div class="date-time"> 
           <p class="time duration">{{departureFlight.arrivalTime-departureFlight.departureTime | date:"h:mm"}}h</p> 
          </div> 
          <div class="point-title"> 
          </div> 
         </div> 


         <div class="time-slice row"> 
          <div class="date-time"> 
           <p class="date">{{departureFlight.arrivalTime | date:"EEE d MMM"}}</p> 
           <p class="time">{{departureFlight.arrivalTime | date:"h:mma"}}</p> 
          </div> 
          <div class="circle-wrap"> 
           <div class="circle"></div> 
          </div> 
          <div class="point-title"> 
           <span> 
            <b>{{departureFlight.cityTo}} ({{departureFlight.flyTo}})</b> 
           </span> 
          </div> 
         </div> 
        </div> 

        <div ng-if="departureFlight.transferFlight"> 
         <table class="stop-transit"> 
          <tr> 
           <td class="transit-path"> 
            <div class="wait-reason">Connection change<br> 
             Long wait &nbsp;<span class="glyphicons glyphicons-airplane">✈</span></div> 
           </td> 
           <td class="wait-time">{{departureFlight.departureTime | date:"h:mm"}} hours</td> 
          </tr> 
         </table> 
        </div> 
       </div> 
      </div> 

      <div class="col-md-6"> 
       <h3>INBOUND</h3> 
       <div ng-repeat="returnFlight in ticket.route.returnFlights"> 

        <div class="timeline"> 
         <div class="time-slice row"> 
          <div class="date-time"> 
           <p class="date">{{returnFlight.departureTime | date:"EEE d MMM"}}</p> 
           <p class="time">{{returnFlight.departureTime | date:"h:mma"}}</p> 
          </div> 
          <div class="circle-wrap"> 
           <div class="circle"></div> 
          </div> 
          <div class="point-title"> 
          <span> 
           <b>{{returnFlight.cityFrom}} ({{returnFlight.flyFrom}})</b> 
          </span> 
          </div> 
         </div> 

         <div class="time-slice row"> 
          <div class="date-time"> 
           <p class="time duration">{{returnFlight.arrivalTime-returnFlight.departureTime | date:"h:mm"}}h</p> 
          </div> 
          <div class="point-title"> 
          </div> 
         </div> 


         <div class="time-slice row"> 
          <div class="date-time"> 
           <p class="date">{{returnFlight.arrivalTime | date:"EEE d MMM"}}</p> 
           <p class="time">{{returnFlight.arrivalTime | date:"h:mma"}}</p> 
          </div> 
          <div class="circle-wrap"> 
           <div class="circle"></div> 
          </div> 
          <div class="point-title"> 
          <span> 
           <b>{{returnFlight.cityTo}} ({{returnFlight.flyTo}})</b> 
          </span> 
          </div> 
         </div> 
        </div> 

        <div ng-if="returnFlight.transferFlight"> 
         <table class="stop-transit"> 
          <tr> 
           <td class="transit-path"> 
            <div class="wait-reason">Connection change<br> 
             Long wait &nbsp;<span class="glyphicons glyphicons-airplane">✈</span></div> 
           </td> 
           <td class="wait-time">{{returnFlight.departureTime | date:"h:mm"}} hours</td> 
          </tr> 
         </table> 
        </div> 
       </div> 
      </div> 
     </div> 

Answer 1

. Support level zaten% 94,82'dir. Tüm bu çirkin önekleri kullanmanız gerekecek, ancak STYLUS/LESS ve geri kalanların geri kalanında kendinize yardımcı olabilirsiniz.

Burada sonunda olabilir ne hızlı hatları vardır:

.roundtrip { 
 
    display: inline-flex; 
 
    flex-direction: row; 
 
    align-items: stretch; 
 
    background-color: #909090; 
 
} 
 

 
.trip { 
 
    width: 100px; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
    margin: 0px 3px; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.flight { 
 
    background-color: #B0B0B0; 
 
    white-space: nowrap; 
 
} 
 

 
.flight-path { 
 
    width: 6px; 
 
    min-height: 15px; 
 
    flex-grow: 1; 
 
    align-self: center; 
 
    background-color: #6090FF; 
 
} 
 

 
.connection { 
 
    height: 40px; 
 
    color: red; 
 
    border: 1px solid red; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
}

<span class="roundtrip"> 
 
    <div class="trip">Outbound 
 
    <div class="flight">Los Angeles</div> 
 
    <div class="flight-path"></div> 
 
    <div class="flight">Chicago</div> 
 
    <div class="connection">5hr wait</div> 
 
    <div class="flight">Chicago</div> 
 
    <div class="flight-path"></div> 
 
    <div class="flight">New York</div> 
 
    <div class="connection">2hr wait</div> 
 
    <div class="flight">New York</div> 
 
    <div class="flight-path"></div> 
 
    <div class="flight">Amsterdam</div> 
 
    </div> 
 
    <div class="trip">Inbound 
 
    <div class="flight">Amsterdam</div> 
 
    <div class="flight-path"></div> 
 
    <div class="flight">Los Angeles</div> 
 
    </div> 
 
</span>