HTML Il CSS regola automaticamente l'altezza

Question

Sto tentando di visualizzare il volo in uscita e in entrata visualizzandolo utilizzando CSS/LESS. Il problema è che quando il volo in uscita ha più cambi aeroportuali, quindi In entrata, la linea rimane al livello del primo volo. Voglio che la linea regoli l'altezza in modo dinamico sulla base del percorso più lungo.

Potresti per favore aiutarmi a capire come ottenere i risultati richiesti?

UPDATE: Preparato Plunker esempio (fare uno schermo più ampio per poter vedere in modo corretto)

Questo è quello che ho:

Questo è quello che sto cercando achive:

MENO:

.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:

<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

che urla solo FlexBox. Support level è già al 94,82%. Dovrai usare tutti quei brutti prefissi, ma puoi aiutare te stesso con STYLUS/LESS e il resto di loro.

Ecco un breve riassunto di ciò che si potrebbe finire con:

.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>