HTML CSS自动调整高度

概述我试图通过使用CSS / LESS可视化来显示出站和入境航班.问题是当出境航班有更多的机场变更时,入境然后线路保持在第一个航班的水平.我希望根据最长的路线动态调整行高. 你能帮我弄清楚如何达到要求的结果吗？ 更新：准备Plunker示例(使屏幕更宽,以便正确看到它) 这就是我所拥有的： 这就是我想要的： 减： .time-slice { position: relative; displa 我试图通过使用CSS / LESS可视化来显示出站和入境航班.问题是当出境航班有更多的机场变更时,入境然后线路保持在第一个航班的水平.我希望根据最长的路线动态调整行高.

你能帮我弄清楚如何达到要求的结果吗？

更新：准备Plunker示例(使屏幕更宽,以便正确看到它)

这就是我所拥有的：

这就是我想要的：

减：

.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}}" >            <div >                <h3>OUTBOUND</h3>                <div ng-repeat="departureFlight in ticket.route.departureFlights">                    <div >                        <div >                            <div >                                <p >{{departureFlight.departureTime | date:"EEE d MMM"}}</p>                                <p >{{departureFlight.departureTime | date:"h:mma"}}</p>                            </div>                            <div >                                <div ></div>                            </div>                            <div >                                <span>                                    <b>{{departureFlight.cityFrom}} ({{departureFlight.flyFrom}})</b>                                </span>                            </div>                        </div>                        <div >                            <div >                                <p >{{departureFlight.arrivalTime-departureFlight.departureTime | date:"h:mm"}}h</p>                            </div>                            <div >                            </div>                        </div>                        <div >                            <div >                                <p >{{departureFlight.arrivalTime | date:"EEE d MMM"}}</p>                                <p >{{departureFlight.arrivalTime | date:"h:mma"}}</p>                            </div>                            <div >                                <div ></div>                            </div>                            <div >                                <span>                                    <b>{{departureFlight.cityTo}} ({{departureFlight.flyTo}})</b>                                </span>                            </div>                        </div>                    </div>                    <div ng-if="departureFlight.transferFlight">                        <table >                            <tr>                                <td >                                    <div >Connection change<br>                                        Long wait &nbsp;<span >✈</span></div>                                </td>                                <td >{{departureFlight.departureTime | date:"h:mm"}} hours</td>                            </tr>                        </table>                    </div>                </div>            </div>            <div >                <h3>INBOUND</h3>                <div ng-repeat="returnFlight in ticket.route.returnFlights">                    <div >                        <div >                            <div >                                <p >{{returnFlight.departureTime | date:"EEE d MMM"}}</p>                                <p >{{returnFlight.departureTime | date:"h:mma"}}</p>                            </div>                            <div >                                <div ></div>                            </div>                            <div >                            <span>                                <b>{{returnFlight.cityFrom}} ({{returnFlight.flyFrom}})</b>                            </span>                            </div>                        </div>                        <div >                            <div >                                <p >{{returnFlight.arrivalTime-returnFlight.departureTime | date:"h:mm"}}h</p>                            </div>                            <div >                            </div>                        </div>                        <div >                            <div >                                <p >{{returnFlight.arrivalTime | date:"EEE d MMM"}}</p>                                <p >{{returnFlight.arrivalTime | date:"h:mma"}}</p>                            </div>                            <div >                                <div ></div>                            </div>                            <div >                            <span>                                <b>{{returnFlight.cityTo}} ({{returnFlight.flyTo}})</b>                            </span>                            </div>                        </div>                    </div>                    <div ng-if="returnFlight.transferFlight">                        <table >                            <tr>                                <td >                                    <div >Connection change<br>                                        Long wait &nbsp;<span >✈</span></div>                                </td>                                <td >{{returnFlight.departureTime | date:"h:mm"}} hours</td>                            </tr>                        </table>                    </div>                </div>            </div>        </div>

解决方法 这只是尖叫flexBox. Support level已经是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 >  <div >Outbound    <div >Los Angeles</div>    <div ></div>    <div >Chicago</div>    <div >5hr wait</div>    <div >Chicago</div>    <div ></div>    <div >New York</div>    <div >2hr wait</div>    <div >New York</div>    <div ></div>    <div >Amsterdam</div>  </div>  <div >Inbound    <div >Amsterdam</div>    <div ></div>    <div >Los Angeles</div>  </div></span>

总结

以上是内存溢出为你收集整理的HTML CSS自动调整高度全部内容，希望文章能够帮你解决HTML CSS自动调整高度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。