需要HTMLCSS对齐解决方案

Question

我真的不确定我是否走在正确的道路上...每次我为我之前的问题找到解决方案以及后来当我将 "fixed" 代码与其他东西集成时它再次中断，所以让我觉得我在这里做一些根本错误的事情。这就是为什么我要求您审查并提出 FIX 或完成我计划实现的新解决方案的原因。

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

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

你能帮我弄清楚，我该如何修复或更改整个体系结构、解决方案，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

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

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

Answer 2

您没有遵循，您再次在不应该插入的块元素中插入了块元素，从而破坏了 flexbox。

看到这个 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">

需要HTMLCSS对齐解决方案

Need HTML CSS alignment solution

html

css

less

twitter-bootstrap

angularjs