HTML CSS автоматически настраивает высоту

Я пытаюсь отобразить исходящий и входящий рейс, визуализируя его с помощью CSS / LESS. Проблема в том, что когда исходящий рейс имеет больше изменений аэропорта, чем входящий, то линия остается на уровне первого рейса. Я хочу, чтобы линия динамически регулировала высоту на основе самого длинного маршрута.

не могли бы вы помочь мне выяснить, как добиться желаемого результата?

обновление: подготовлено Plunker пример (сделать экран шире, чтобы увидеть это правильно)

вот что у меня получилось:

enter image description here

это то, что я пытаюсь добиться:

enter image description here

минус:

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

1 ответов


Это просто кричит flexbox. уровень поддержки уже на 94.82%. Вам нужно будет использовать все эти уродливые префиксы, но вы можете помочь себе стилусом/меньше и остальными.

вот краткий обзор того, что вы могли бы в конечном итоге:

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