我试图通过使用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：
<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 <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 <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>
解决方法
这只是尖叫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>
