logo标签列表

HTML CSS自动调整高度

htmlcssangularjsless
8
我想用CSS/LESS将出站和入站航班可视化。问题是，如果出站航班的机场转机次数比入站航班多，则线路保持在第一航班的水平线上。我希望根据最长的路线动态调整线路高度。
请问如何实现所需结果？
更新：已准备好 Plunker 示例（为了正确显示，请将屏幕放宽）。
以下是我的代码：

enter image description here

这就是我正在尝试实现的内容：

enter image description here

LESS：

.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>
你好。你有一个可用的代码片段或者在线编辑器吗？ - Praveen Kumar Purushothaman
我会尝试准备，稍等一下。 - Wild Goat
@PraveenKumar，我已经准备了一个Plunker示例。http://plnkr.co/edit/XLXnnXXYPtC4c50b7Hj6?p=preview - Wild Goat
@WildGoat，问题中的代码以及plunker远远超出了展示您拥有和需要的要求。这里的问题不是关于Angular，而是关于HTML/CSS。这只会在您需要和询问之间制造一个巨大的烟幕。 - Amit
@Amit，首先非常感谢您在下面的回答。我刚刚创建了一个plunker来演示我的HTML/CSS问题，在.js中不需要进行任何更改。 - Wild Goat
1个回答
7

这简直就是Flexbox的杀手锏。支持水平已经达到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>

Amit，非常感谢您的回答，看起来非常有表现力，我很喜欢。由于我不是CSS / LESS专家，所以我的解决方案可能非常简单，但是您认为使用您演示的方式重构我的解决方案可能会带来很多问题吗？我应该首先查看什么？ - Wild Goat
我看了你发布的 plunker，由于有太多标记需要筛选，所以很难准确地判断出问题所在。我认为你有一些元素是 display: block 的，将它们改为 flexboxes 会更好。我建议从一个干净的板子开始（如果你愿意，可以使用我的片段），然后逐步添加功能（UI 元素）并查看哪些会破坏你的设计流程。希望要么什么都不会发生，要么至少你能够找到问题并解决它（或再次来到 SO :-)）。 - Amit
这太棒了！:) - Praveen Kumar Purushothaman
@Amit，我该如何将入站/出站拆分为单独的引导列6乘6？但是当我这样做时，入站与出站的高度不同步...谢谢！ - Wild Goat
@Amit，我已经将你的解决方案集成到我的代码中，但不幸的是，我遇到了与我发布当前问题时相似的问题。你能否再次看一下我的问题：http://stackoverflow.com/questions/32541364/need-html-css-alignment-solution - Wild Goat
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接