HTML CSS tự động điều chỉnh chiều cao

Question

Tôi đang cố hiển thị chuyến bay ra và đi bằng cách trực quan hóa bằng cách sử dụng CSS/LESS. Vấn đề là khi chuyến bay Outbound có nhiều thay đổi sân bay thì Inbound sau đó line vẫn ở mức độ của chuyến bay đầu tiên. Tôi muốn điều chỉnh chiều cao dòng động dựa trên tuyến đường dài nhất.

Bạn có thể giúp tôi tìm ra cách đạt được kết quả cần thiết không?

CẬP NHẬT: Chuẩn bị Plunker dụ (tạo ra một màn hình rộng hơn để xem nó đúng)

Đây là những gì tôi đã có:

Đây là những gì tôi đang cố gắng achive:

LESS:

.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

Đó chỉ hét lên flexbox. Support level đã ở mức 94,82%. Bạn sẽ cần phải sử dụng tất cả các tiền tố xấu xí đó, nhưng bạn có thể tự giúp mình với STYLUS/LESS và phần còn lại của chúng.

Dưới đây là một phác thảo nhanh chóng về những gì bạn có thể kết thúc với:

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