HTML CSS自动调整高度 [英] HTML CSS automatically adjust height
问题描述
我想显示使用CSS / LESS它可视化出站和入站的飞行。问题是,当出境航班有更多的变化机场入境,然后再行停留在第一次飞行的水平。我想基于动态时间最长的航线上线调整高度。
能否请你帮我弄清楚如何达到要求的结果?
更新:prepared Plunker 例子(使屏幕宽才能看到它正常)
这是我得到了什么:
这是我试图achive:
LESS:
。时间片{
位置:相对;
显示:-webkit-盒;
显示:-webkit-FLEX;
显示:-ms-Flexbox的;
显示:弯曲;
-webkit-箱对齐:舒展;
-webkit-ALIGN-项目:舒展;
-ms-FLEX对齐:舒展;
调整项目:舒展;
保证金左:20像素;
}。时间切片> * {
填充:20像素;
}.circle {
宽度:16px的;
高度:16px的;
箱尺寸:内容箱;
边框颜色:#29a8bb;
背景:#FFFFFF;
边界半径:32PX;
显示:块;
边界:2px的固体蓝色;
}
.circle缠绕{
位置:绝对的;
顶:0像素;
左:91px;
的z-index:2;
}
.circle换行> .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
< DIV ID ={{ticket.id}}的风格=显示:无>
< DIV CLASS =COL-MD-6号线>
< H3>出境< / H3 GT&;
< DIV NG重复=departureFlight在ticket.route.departureFlights> < DIV CLASS =时间表>
< DIV CLASS =时间切片行>
< DIV CLASS =日期时间>
< p =类约会> {{departureFlight.departureTime |日期:EEEÐMMM}}< / P>
< p =类时间> {{departureFlight.departureTime |日期:H:MMA}}< / P>
< / DIV>
< DIV CLASS =圆圈包>
< DIV CLASS =圈子>< / DIV>
< / DIV>
< DIV CLASS =点标题>
<跨度>
&所述b取代; {{departureFlight.cityFrom}}({{departureFlight.flyFrom}})下; / B个
< / SPAN>
< / DIV>
< / DIV> < DIV CLASS =时间切片行>
< DIV CLASS =日期时间>
< p =班持续时间> {{departureFlight.arrivalTime,departureFlight.departureTime |日期:H:MM}} H< / P>
< / DIV>
< DIV CLASS =点标题>
< / DIV>
< / DIV>
< DIV CLASS =时间切片行>
< DIV CLASS =日期时间>
< p =类约会> {{departureFlight.arrivalTime |日期:EEEÐMMM}}< / P>
< p =类时间> {{departureFlight.arrivalTime |日期:H:MMA}}< / P>
< / DIV>
< DIV CLASS =圆圈包>
< DIV CLASS =圈子>< / DIV>
< / DIV>
< DIV CLASS =点标题>
<跨度>
&所述b取代; {{departureFlight.cityTo}}({{departureFlight.flyTo}})下; / B个
< / SPAN>
< / DIV>
< / DIV>
< / DIV> < DIV NG-IF =departureFlight.transferFlight>
<表类=止过境>
&所述; TR>
< TD类=中转路径>
< DIV CLASS =等待原因>连接变化与LT; BR>
漫长的等待和放大器; NBSP;<跨度类=glyphicons glyphicons-飞机>&✈LT; / SPAN>< / DIV>
< / TD>
< TD类=等待时间> {{departureFlight.departureTime |日期:H:MM}}小时< / TD>
< / TR>
< /表>
< / DIV>
< / DIV>
< / DIV> < DIV CLASS =COL-MD-6>
< H3>入境< / H3 GT&;
< DIV NG重复=,在ticket.route.returnFlights returnFlight> < DIV CLASS =时间表>
< DIV CLASS =时间切片行>
< DIV CLASS =日期时间>
< p =类约会> {{returnFlight.departureTime |日期:EEEÐMMM}}< / P>
< p =类时间> {{returnFlight.departureTime |日期:H:MMA}}< / P>
< / DIV>
< DIV CLASS =圆圈包>
< DIV CLASS =圈子>< / DIV>
< / DIV>
< DIV CLASS =点标题>
<跨度>
&所述b取代; {{returnFlight.cityFrom}}({{returnFlight.flyFrom}})下; / B个
< / SPAN>
< / DIV>
< / DIV> < DIV CLASS =时间切片行>
< DIV CLASS =日期时间>
< p =班持续时间> {{returnFlight.arrivalTime,returnFlight.departureTime |日期:H:MM}} H< / P>
< / DIV>
< DIV CLASS =点标题>
< / DIV>
< / DIV>
< DIV CLASS =时间切片行>
< DIV CLASS =日期时间>
< p =类约会> {{returnFlight.arrivalTime |日期:EEEÐMMM}}< / P>
< p =类时间> {{returnFlight.arrivalTime |日期:H:MMA}}< / P>
< / DIV>
< DIV CLASS =圆圈包>
< DIV CLASS =圈子>< / DIV>
< / DIV>
< DIV CLASS =点标题>
<跨度>
&所述b取代; {{returnFlight.cityTo}}({{returnFlight.flyTo}})下; / B个
< / SPAN>
< / DIV>
< / DIV>
< / DIV> < DIV NG-IF =returnFlight.transferFlight>
<表类=止过境>
&所述; TR>
< TD类=中转路径>
< DIV CLASS =等待原因>连接变化与LT; BR>
漫长的等待和放大器; NBSP;<跨度类=glyphicons glyphicons-飞机>&✈LT; / SPAN>< / DIV>
< / TD>
< TD类=等待时间> {{returnFlight.departureTime |日期:H:MM}}小时< / TD>
< / TR>
< /表>
< / DIV>
< / DIV>
< / DIV>
< / DIV>
这只是尖叫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
}
\r
<跨度类=往返>\r
< DIV CLASS =跳闸>出站\r
< DIV CLASS =飞行>洛杉矶< / DIV>\r
< DIV CLASS =飞行路线>< / DIV>\r
< DIV CLASS =飞行>芝加哥< / DIV>\r
< DIV CLASS =连接> 5小时的等待< / DIV>\r
< DIV CLASS =飞行>芝加哥< / DIV>\r
< DIV CLASS =飞行路线>< / DIV>\r
< DIV CLASS =飞行>纽约< / DIV>\r
< DIV CLASS =连接> 2小时的等待< / DIV>\r
< DIV CLASS =飞行>纽约< / DIV>\r
< DIV CLASS =飞行路线>< / DIV>\r
< DIV CLASS =飞行>与阿姆斯特丹LT; / DIV>\r
< / DIV>\r
< DIV CLASS =跳闸>入站\r
< DIV CLASS =飞行>与阿姆斯特丹LT; / DIV>\r
< DIV CLASS =飞行路线>< / DIV>\r
< DIV CLASS =飞行>洛杉矶< / DIV>\r
< / DIV>\r
< / SPAN>
\r
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 <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 <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屋!