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

查看：166 发布时间：2016/4/7 23:47:03 html css angularjs less

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

问题描述

我想显示使用CSS / LESS它可视化出站和入站的飞行。问题是，当出境航班有更多的变化机场入境，然后再行停留在第一次飞行的水平。我想基于动态时间最长的航线上线调整高度。

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

更新：prepared Plunker 例子（使屏幕宽才能看到它正常）

这是我得到了什么：

这是我试图achive：

LESS：

 。时间片{
  位置：相对;
  显示：-webkit-盒;
  显示：-webkit-FLEX;
  显示：-ms-Flexbox的;
  显示：弯曲;
  -webkit-箱对齐：舒展;
  -webkit-ALIGN-项目：舒展;
  -ms-FLEX对齐：舒展;
  调整项目：舒展;
  保证金左：20像素;
}。时间切片＆GT; * {
  填充：20像素;
}.circle {
  宽度：16px的;
  高度：16px的;
  箱尺寸：内容箱;
  边框颜色：＃29a8bb;
  背景：#FFFFFF;
  边界半径：32PX;
  显示：块;
  边界：2px的固体蓝色;
}
.circle缠绕{
  位置：绝对的;
  顶：0像素;
  左：91px;
  的z-index：2;
}
.circle换行＆GT; .circle {
  位置：相对;
  左：20像素;
}
。约会时间 {
  箱尺寸：内容箱;
  -webkit-FLEX-收缩：0;
  -ms-FLEX负：0;
  弯曲收缩：0;
  -webkit-FLEX-依据：100像素;
  -ms-flex- preferred尺寸：100像素;
  柔性基础：100像素;
  文本对齐：中心;
  的margin-top：-5px;
}
。日期，
。时间 {
  最大宽度：90像素;
  颜色：＃999999;
  字体大小：13像素;
  的margin-top：0像素;
  保证金底：10px的;
  保证金左：20像素;
}
。时间-slice.row：没有（：最后一个孩子）.point标题{
  左边框：2px的固体蓝色;
  填充左：15px的;
  填充顶：0;
  位置：相对;
  顶部：20像素;
}
.duration {
  保证金左：50像素;
  最大宽度：90像素;
  颜色：＃999999;
  字体大小：13像素;  保证金底：10px的;
}
.stop途{
  边框宽度：2px的;
  颜色：红色;
  填充左：5像素;
  保证金左：20像素;
  保证金底：10px的;
  表格的布局：固定;
}.stop途，.transit路径，.wait时间{
  填充右：10px的;
  填充左：20像素;
}.transit路径{
  右边框样式：星罗棋布;
  宽度：140px;
}
.wait-原因{
  文本对齐：中心;
}。搜索结果{
  填充：0像素均为15px;
}

HTML

 ＆LT; DIV ID ={{ticket.id}}的风格=显示：无＆GT;
            ＆LT; DIV CLASS =COL-MD-6号线＆GT;
                ＆LT; H3＆GT;出境＆LT; / H3 GT＆;
                ＆LT; DIV NG重复=departureFlight在ticket.route.departureFlights＆GT;                    ＆LT; DIV CLASS =时间表＆GT;
                        ＆LT; DIV CLASS =时间切片行＆GT;
                            ＆LT; DIV CLASS =日期时间＆GT;
                                ＆LT; p =类约会＆GT; {{departureFlight.departureTime |日期：EEEÐMMM}}＆LT; / P＆GT;
                                ＆LT; p =类时间＆GT; {{departureFlight.departureTime |日期：H：MMA}}＆LT; / P＆GT;
                            ＆LT; / DIV＆GT;
                            ＆LT; DIV CLASS =圆圈包＆GT;
                                ＆LT; DIV CLASS =圈子＆GT;＆LT; / DIV＆GT;
                            ＆LT; / DIV＆GT;
                            ＆LT; DIV CLASS =点标题＆GT;
                                ＆LT;跨度＆GT;
                                    ＆所述b取代; {{departureFlight.cityFrom}}（{{departureFlight.flyFrom}}）下; / B个
                                ＆LT; / SPAN＆GT;
                            ＆LT; / DIV＆GT;
                        ＆LT; / DIV＆GT;                        ＆LT; DIV CLASS =时间切片行＆GT;
                            ＆LT; DIV CLASS =日期时间＆GT;
                                ＆LT; p =班持续时间＆GT; {{departureFlight.arrivalTime，departureFlight.departureTime |日期：H：MM}} H＆LT; / P＆GT;
                            ＆LT; / DIV＆GT;
                            ＆LT; DIV CLASS =点标题＆GT;
                            ＆LT; / DIV＆GT;
                        ＆LT; / DIV＆GT;
                        ＆LT; DIV CLASS =时间切片行＆GT;
                            ＆LT; DIV CLASS =日期时间＆GT;
                                ＆LT; p =类约会＆GT; {{departureFlight.arrivalTime |日期：EEEÐMMM}}＆LT; / P＆GT;
                                ＆LT; p =类时间＆GT; {{departureFlight.arrivalTime |日期：H：MMA}}＆LT; / P＆GT;
                            ＆LT; / DIV＆GT;
                            ＆LT; DIV CLASS =圆圈包＆GT;
                                ＆LT; DIV CLASS =圈子＆GT;＆LT; / DIV＆GT;
                            ＆LT; / DIV＆GT;
                            ＆LT; DIV CLASS =点标题＆GT;
                                ＆LT;跨度＆GT;
                                    ＆所述b取代; {{departureFlight.cityTo}}（{{departureFlight.flyTo}}）下; / B个
                                ＆LT; / SPAN＆GT;
                            ＆LT; / DIV＆GT;
                        ＆LT; / DIV＆GT;
                    ＆LT; / DIV＆GT;                    ＆LT; DIV NG-IF =departureFlight.transferFlight＆GT;
                        ＆LT;表类=止过境＆GT;
                            ＆所述; TR＆GT;
                                ＆LT; TD类=中转路径＆GT;
                                    ＆LT; DIV CLASS =等待原因＆GT;连接变化与LT; BR＆GT;
                                        漫长的等待和放大器; NBSP;＆LT;跨度类=glyphicons glyphicons-飞机＆GT;＆✈LT; / SPAN＆GT;＆LT; / DIV＆GT;
                                ＆LT; / TD＆GT;
                                ＆LT; TD类=等待时间＆GT; {{departureFlight.departureTime |日期：H：MM}}小时＆LT; / TD＆GT;
                            ＆LT; / TR＆GT;
                        ＆LT; /表＆gt;
                    ＆LT; / DIV＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;            ＆LT; DIV CLASS =COL-MD-6＆GT;
                ＆LT; H3＆GT;入境＆LT; / H3 GT＆;
                ＆LT; DIV NG重复=，在ticket.route.returnFlights returnFlight＆GT;                    ＆LT; DIV CLASS =时间表＆GT;
                        ＆LT; DIV CLASS =时间切片行＆GT;
                            ＆LT; DIV CLASS =日期时间＆GT;
                                ＆LT; p =类约会＆GT; {{returnFlight.departureTime |日期：EEEÐMMM}}＆LT; / P＆GT;
                                ＆LT; p =类时间＆GT; {{returnFlight.departureTime |日期：H：MMA}}＆LT; / P＆GT;
                            ＆LT; / DIV＆GT;
                            ＆LT; DIV CLASS =圆圈包＆GT;
                                ＆LT; DIV CLASS =圈子＆GT;＆LT; / DIV＆GT;
                            ＆LT; / DIV＆GT;
                            ＆LT; DIV CLASS =点标题＆GT;
                            ＆LT;跨度＆GT;
                                ＆所述b取代; {{returnFlight.cityFrom}}（{{returnFlight.flyFrom}}）下; / B个
                            ＆LT; / SPAN＆GT;
                            ＆LT; / DIV＆GT;
                        ＆LT; / DIV＆GT;                        ＆LT; DIV CLASS =时间切片行＆GT;
                            ＆LT; DIV CLASS =日期时间＆GT;
                                ＆LT; p =班持续时间＆GT; {{returnFlight.arrivalTime，returnFlight.departureTime |日期：H：MM}} H＆LT; / P＆GT;
                            ＆LT; / DIV＆GT;
                            ＆LT; DIV CLASS =点标题＆GT;
                            ＆LT; / DIV＆GT;
                        ＆LT; / DIV＆GT;
                        ＆LT; DIV CLASS =时间切片行＆GT;
                            ＆LT; DIV CLASS =日期时间＆GT;
                                ＆LT; p =类约会＆GT; {{returnFlight.arrivalTime |日期：EEEÐMMM}}＆LT; / P＆GT;
                                ＆LT; p =类时间＆GT; {{returnFlight.arrivalTime |日期：H：MMA}}＆LT; / P＆GT;
                            ＆LT; / DIV＆GT;
                            ＆LT; DIV CLASS =圆圈包＆GT;
                                ＆LT; DIV CLASS =圈子＆GT;＆LT; / DIV＆GT;
                            ＆LT; / DIV＆GT;
                            ＆LT; DIV CLASS =点标题＆GT;
                            ＆LT;跨度＆GT;
                                ＆所述b取代; {{returnFlight.cityTo}}（{{returnFlight.flyTo}}）下; / B个
                            ＆LT; / SPAN＆GT;
                            ＆LT; / DIV＆GT;
                        ＆LT; / DIV＆GT;
                    ＆LT; / DIV＆GT;                    ＆LT; DIV NG-IF =returnFlight.transferFlight＆GT;
                        ＆LT;表类=止过境＆GT;
                            ＆所述; TR＆GT;
                                ＆LT; TD类=中转路径＆GT;
                                    ＆LT; DIV CLASS =等待原因＆GT;连接变化与LT; BR＆GT;
                                        漫长的等待和放大器; NBSP;＆LT;跨度类=glyphicons glyphicons-飞机＆GT;＆✈LT; / SPAN＆GT;＆LT; / DIV＆GT;
                                ＆LT; / TD＆GT;
                                ＆LT; TD类=等待时间＆GT; {{returnFlight.departureTime |日期：H：MM}}小时＆LT; / TD＆GT;
                            ＆LT; / TR＆GT;
                        ＆LT; /表＆gt;
                    ＆LT; / DIV＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;

解决方案

这只是尖叫Flexbox的。支撑位已经在94.82％。您将需要使用所有这些丑陋的prefixes，但你可以帮助自己与STYLUS / LESS和其余他们。

以下是你可能最终什么了一个快速概要：

 .roundtrip {\r
  显示：内联柔性;\r
  柔性方向：排;\r
  调整项目：舒展;\r
  背景颜色：＃909090;\r
}\r
\r
.trip {\r
  宽度：100像素;\r
  文本对齐：中心;\r
  边框：1px的纯黑色;\r
  保证金：0像素的3px;\r
  显示：弯曲;\r
  柔性方向：列;\r
}\r
\r
。飞行 {\r
  背景颜色：＃B0B0B0;\r
  空格：NOWRAP;\r
}\r
\r
.flight路径{\r
  宽度：6像素;\r
  最小高度：15px的;\r
  FLEX-增长：1;\r
  调整自我：中心;\r
  背景颜色：＃6090FF;\r
}\r
\r
■连接{\r
  高度：40像素;\r
  颜色：红色;\r
  边框：1px的固体红色;\r
  显示：弯曲;\r
  柔性方向：列;\r
  证明内容：中心;\r
}

＆LT;跨度类=往返＆GT;\r
  ＆LT; DIV CLASS =跳闸＆GT;出站\r
    ＆LT; DIV CLASS =飞行＆GT;洛杉矶＆LT; / DIV＆GT;\r
    ＆LT; DIV CLASS =飞行路线＆GT;＆LT; / DIV＆GT;\r
    ＆LT; DIV CLASS =飞行＆GT;芝加哥＆LT; / DIV＆GT;\r
    ＆LT; DIV CLASS =连接＆GT; 5小时的等待＆LT; / DIV＆GT;\r
    ＆LT; DIV CLASS =飞行＆GT;芝加哥＆LT; / DIV＆GT;\r
    ＆LT; DIV CLASS =飞行路线＆GT;＆LT; / DIV＆GT;\r
    ＆LT; DIV CLASS =飞行＆GT;纽约＆LT; / DIV＆GT;\r
    ＆LT; DIV CLASS =连接＆GT; 2小时的等待＆LT; / DIV＆GT;\r
    ＆LT; DIV CLASS =飞行＆GT;纽约＆LT; / DIV＆GT;\r
    ＆LT; DIV CLASS =飞行路线＆GT;＆LT; / DIV＆GT;\r
    ＆LT; DIV CLASS =飞行＆GT;与阿姆斯特丹LT; / DIV＆GT;\r
  ＆LT; / DIV＆GT;\r
  ＆LT; DIV CLASS =跳闸＆GT;入站\r
    ＆LT; DIV CLASS =飞行＆GT;与阿姆斯特丹LT; / DIV＆GT;\r
    ＆LT; DIV CLASS =飞行路线＆GT;＆LT; / DIV＆GT;\r
    ＆LT; DIV CLASS =飞行＆GT;洛杉矶＆LT; / DIV＆GT;\r
  ＆LT; / DIV＆GT;\r
＆LT; / SPAN＆GT;

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屋！

查看全文

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

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

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

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭