एचटीएमएल सीएसएस स्वचालित रूप से ऊंचाई

Question

समायोजित करें मैं सीएसएस/कम से कम इसे देखकर आउटबाउंड और इनबाउंड उड़ान प्रदर्शित करने की कोशिश कर रहा हूं। समस्या यह है कि जब आउटबाउंड उड़ान में हवाईअड्डे में परिवर्तन होता है तो इनबाउंड फिर लाइन पहली उड़ान के स्तर पर रहता है। मैं लाइन को सबसे लंबा मार्ग के आधार पर गतिशील रूप से समायोजित करना चाहता हूं।

क्या आप कृपया यह जानने में सहायता कर सकते हैं कि आवश्यक परिणाम कैसे प्राप्त करें?

अद्यतन:

यह मैं क्या कोशिश कर रहा हूँ है: तैयार Plunker उदाहरण (एक स्क्रीन व्यापक बनाने के क्रम में इसे ठीक से देखने के लिए)

यह मैं क्या मिल गया है है प्राप्त करने:

कम:

.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

कि सिर्फ flexbox चिल्लाती। Support level पहले से ही 94.82% पर है। आपको उन सभी बदसूरत उपसर्गों का उपयोग करने की आवश्यकता होगी, लेकिन आप STYLUS/LESS और बाकी के साथ स्वयं की सहायता कर सकते हैं।

यहाँ तुम क्या साथ खत्म हो सकता है की एक त्वरित रूपरेखा है:

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