我试图通过使用CSS / LESS可视化来显示出站和入境航班.问题是当出境航班有更多的机场变更时,入境然后线路保持在第一个航班的水平.我希望根据最长的路线动态调整行高.
你能帮我弄清楚如何达到要求的结果吗?
更新:准备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:
OUTBOUND
{{departureFlight.departureTime | date:"EEE d MMM"}}
{{departureFlight.departureTime | date:"h:mma"}}
{{departureFlight.cityFrom}} ({{departureFlight.flyFrom}})
{{departureFlight.arrivalTime-departureFlight.departureTime | date:"h:mm"}}h
{{departureFlight.arrivalTime | date:"EEE d MMM"}}
{{departureFlight.arrivalTime | date:"h:mma"}}
{{departureFlight.cityTo}} ({{departureFlight.flyTo}})
Connection change
Long wait ✈ | {{departureFlight.departureTime | date:"h:mm"}} hours |
INBOUND
{{returnFlight.departureTime | date:"EEE d MMM"}}
{{returnFlight.departureTime | date:"h:mma"}}
{{returnFlight.cityFrom}} ({{returnFlight.flyFrom}})
{{returnFlight.arrivalTime-returnFlight.departureTime | date:"h:mm"}}h
{{returnFlight.arrivalTime | date:"EEE d MMM"}}
{{returnFlight.arrivalTime | date:"h:mma"}}
{{returnFlight.cityTo}} ({{returnFlight.flyTo}})
Connection change
Long wait ✈ | {{returnFlight.departureTime | date:"h:mm"}} hours |