HTML CSS自动调整高度 [英] HTML CSS automatically adjust height

查看：73
本文介绍了HTML CSS自动调整高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我尝试使用CSS / LESS显示出站和入站航班。问题是，当出站航班有更多的机场更改，然后入站然后线停留在第一次飞行的水平。我想根据最长的路线动态调整行高度。



您能帮我找出实现所需结果的方法吗？



UPDATE ：准备



这是我正在尝试的achive：





LESS：

  .time-slice {
位置：相对; 
 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 |日期：EEE d MMM}}< / p> 
< p class =time> {{departureFlight.departureTime |日期：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 |日期：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 |日期：EEE d MMM}}< / p> 
< p class =time> {{departureFlight.arrivalTime |日期：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>连线变更< br> 
长等待& nbsp;< span class =glyphicons glyphicons-aircraft>✈< / span>< / div> 
< / td> 
< td class =wait-time> {{departureFlight.departureTime |日期：h：mm}}小时< / 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 |日期：EEE d MMM}}< / p> 
< p class =time> {{returnFlight.departureTime |日期：h：mma}}< / p> 
< / div> 
< div class =circle-wrap> 
< div class =circle>< / div> 
< / div> 
< div class =points-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 |日期：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 |日期：EEE d MMM}}< / p> 
< p class =time> {{returnFlight.arrivalTime |日期：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>连线变更< br> 
长等待& nbsp;< span class =glyphicons glyphicons-aircraft>✈< / span>< / div> 
< / td> 
< td class =wait-time> {{returnFlight.departureTime |日期：h：mm}}小时< / td> 
< / tr> 
< / table> 
< / div> 
< / div> 
< / div> 
< / div>


解决方案

支持级别已达到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;显示：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;红色; border：1px solid red;显示：flex; flex-direction：column; justify-content：center;}  

 < span class = roundtrip> < div class =trip>出站< div class =flight>洛杉矶< / div> < div class =flight-path>< / div> < div class =flight>芝加哥< / div> < div class =connection> 5小时wait< / div> < div class =flight>芝加哥< / div> < div class =flight-path>< / div> < div class =flight>纽约< / div> < div class =connection> 2小时wait< / div> < div class =flight>纽约< / div> < div class =flight-path>< / div> < div class =flight>阿姆斯特丹< / div> < / div> < div class =trip> Inbound< div class =flight>阿姆斯特丹< / div> < div class =flight-path>< / div> < div class =flight>洛杉矶< / div> < / div>< / span>


I am trying to display outbound and inbound flight by visualising it using CSS/LESS. The problem is that when Outbound flight has more airport changes then Inbound then line stays at the level of first flight. I want line adjust height dynamically based on the longest route.

Could you please help me to figure out how do achieve required results?

UPDATE: Prepared Plunker example (make a screen wider in order to see it properly)

This is what I've got:

This is what I am trying achive:

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>

解决方案

That just screams flexbox. Support level is already at 94.82%. You will need to use all those ugly prefixes, but you can help yourself with STYLUS/LESS and the rest of 'em.

Here's a quick outline of what you might end up with:

.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>

这篇关于HTML CSS自动调整高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆