HTML CSS 自动调整高度

Question

我正在尝试通过使用 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 &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>