html - 需要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 ，您再次将 block 元素插入到不应该的位置，从而破坏了 flex 盒。

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

关键的变化在于:

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