需要 HTML CSS 对齐解决方案

Question

我真的不确定我是否走在正确的道路上......每次我为之前的问题找到解决方案时，然后当我将“固定”代码与其他东西集成时，它再次中断，所以这让我认为我在这里做一些根本错误的事情。这就是为什么我要求您针对我计划实现的目标审查并提出修复或完成新的解决方案。

我正在尝试显示航班信息，并且每条路线都应按照您在图片上看到的方式显示。

目前，它可以正常工作，但在某些情况下，当出境航班的转接次数多于入境航班时，航班路径（蓝线）会中断并与出境航班中的第二个航班保持在同一水平线上。我希望在当前情况下，蓝色路径一直向下，每个入站/出站飞行路径长度必须同步并且相互关联。 （无论每个航班有多少个连接，长度都相同）

能否请您帮我弄清楚，我如何修复或更改整个架构、解决方案、CSS，以绘制一条蓝色路径线并保持入境和出境航班的长度相同，无论每个航班有多少连接？

Plunker code example

HTML：

    <div class="roundtrip">
        <div class="col-md-6">Outbound

            <div class="trip" ng-repeat="departureFlight in ticket.route.departureFlights">

                <div class="flight align-bottom">
                    <div class="date-time col-md-offset-2 col-md-3">
                        <div class="flight-time">{{departureFlight.departureTime | date:"h:mma"}}</div>
                        <div class="flight-date">{{departureFlight.departureTime | date:"EEE, MMM d, y"}}</div>
                    </div>
                    <div class="col-md-offset-0 col-md-2">{{departureFlight.cityFrom}} ({{departureFlight.flyFrom}})</div>
                </div>


                <div class="flight-path">
                    <div class="flight-path">
                        <div class="flight-duration">{{departureFlight.arrivalTime-departureFlight.departureTime | date:"h:mm"}}hr</div>
                    </div>
                </div>

                <div class="flight align-bottom">
                    <div class="date-time col-md-offset-2 col-md-3">
                        <div class="flight-time">{{departureFlight.arrivalTime | date:"h:mma"}}</div>
                        <div class="flight-date">{{departureFlight.arrivalTime | date:"EEE, MMM d, y"}}</div>
                    </div>
                    <div class="col-md-offset-0 col-md-2">{{departureFlight.cityTo}} ({{departureFlight.flyTo}})</div>
                </div>

                <div class="connection" ng-if="departureFlight.transferFlight">
                   {{departureFlight.arrivalTime | date:"h:mm"}}hr wait
                </div>

            </div>

        </div>
        <div class="col-md-6">Inbound

            <div class="trip" ng-repeat="returnFlight in ticket.route.returnFlights">

                <div class="flight align-bottom">
                    <div class="date-time col-md-offset-2 col-md-3">
                        <div class="flight-time">{{returnFlight.departureTime | date:"h:mma"}}</div>
                        <div class="flight-date">{{returnFlight.departureTime | date:"EEE, MMM d, y"}}</div>
                    </div>
                    <div class="col-md-offset-0 col-md-2">{{returnFlight.cityFrom}} ({{returnFlight.flyFrom}})</div>
                </div>


                <div class="flight-path">
                    <div class="flight-path">
                        <div class="flight-duration">{{returnFlight.arrivalTime-returnFlight.departureTime | date:"h:mm"}}hr</div>
                    </div>
                </div>

                <div class="flight align-bottom">
                    <div class="date-time col-md-offset-2 col-md-3">
                        <div class="flight-time">{{returnFlight.arrivalTime | date:"h:mma"}}</div>
                        <div class="flight-date">{{returnFlight.arrivalTime | date:"EEE, MMM d, y"}}</div>
                    </div>
                    <div class="col-md-offset-0 col-md-2">{{returnFlight.cityTo}} ({{returnFlight.flyTo}})</div>
                </div>

                <div class="connection" ng-if="returnFlight.transferFlight">
                    {{returnFlight.arrivalTime | date:"h:mm"}}hr wait
                </div>
            </div>
        </div>
    </div>

CSS：

.searchResult {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.align-bottom {  /*added*/
  display: flex;
  align-items: flex-end;
}
.roundtrip {
  width: 100%;
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
}
.trip {
  //width: 100px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.flight {
  white-space: nowrap;
}
.date-time {
  text-align: center;
}
.flight-path {
  position: relative;
  width: 6px;
  min-height: 135px;
  flex-grow: 1;
  align-self: center;
  background-color: #6090FF;
}

.flight-duration {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: rgba(255, 255, 255, .75);
  text-align: center;
  left:-15px;
}

.connection {
  height: 40px;
  align-self: center;
  width: 70px;
  color: red;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Answer 1

你没有关注my original answer，你又在不应该出现的地方插入了块元素，从而破坏了弹性框。

查看此plunker，使用 angular 的 ng-repeat-start/end 删除不必要的 <div>s 并且不破坏 flexbox。

关键变化在：

<div class="col-md-6 trip">Outbound
   <div class="flight align-bottom"
    ng-repeat-start="departureFlight in ticket.route.departureFlights">

Answer 2

我建议您为出站和入站添加一个类，例如split2（一列中的 2 个）和 split3（一列中的 3 个）。然后你给每个 .trip 一个相对高度。 .split3 .trip 为 33%，.split2 .trip 为 50%。

虽然只是一个简单的草图，但我希望你能明白：http://plnkr.co/edit/Edj0BuPRWMCn6c74d0C3?p=info