需要HTML CSS定位解决方案 [英] Need HTML CSS alignment solution
问题描述
我真的不知道，如果我在正确的道路上......每一次我找到我的previous问题，后来当我融入固定code。与别的东西再次打破了解决方案，这样让我觉得我在这里做一些根本性的错误。这就是为什么我要求您检阅并提出修复或completele为我计划实现一些新的解决方案。
我想显示航班信息和每条航线应显示您在图片中看到的方式。
现在，它的工作原理，但在某些情况下，当出境航班比港航班更多的连接，飞行路线（蓝线）被中断，并保持在同一水平作为出站第二次飞行。我想在当前情况下，蓝色路径，一路走下来，每个入站/出站的飞行路线长度必须在同步和相对于对方。 （相同的长度，无论每个航班有多少个连接了）
能否请你帮我弄清楚，如何解决或改变整个体系结构，解决方案，CSS，绘制一个蓝色的路径线，并保持进出港航班的长度相同不管有多少连接每一种都有？
![在这里输入的形象描述](\"http://i.stack.imgur.com/GJUsk.png\")
HTML
＆LT; DIV CLASS =往返＆GT;
＆LT; DIV CLASS =COL-MD-6＆GT;出站 ＆LT; DIV CLASS =跳闸NG-重复=departureFlight在ticket.route.departureFlights＆GT; ＆LT; DIV CLASS =飞行对齐底＆GT;
＆LT; DIV CLASS =日期 - 时间COL-MD-偏移2 COL-MD-3＆GT;
＆LT; DIV CLASS =飞行时间＆GT; {{departureFlight.departureTime |日期：H：MMA}}＆LT; / DIV＆GT;
＆LT; DIV CLASS =飞行日期＆GT; {{departureFlight.departureTime |日期：EEE，MMM D，Y}}＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =COL-MD-偏移0 COL-MD-2＆GT; {{departureFlight.cityFrom}}（{{departureFlight.flyFrom}}）LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =飞行路线＆GT;
＆LT; DIV CLASS =飞行路线＆GT;
＆LT; DIV CLASS =飞行时间＆GT; {{departureFlight.arrivalTime，departureFlight.departureTime |日期：H：MM}} hr的; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =飞行对齐底＆GT;
＆LT; DIV CLASS =日期 - 时间COL-MD-偏移2 COL-MD-3＆GT;
＆LT; DIV CLASS =飞行时间＆GT; {{departureFlight.arrivalTime |日期：H：MMA}}＆LT; / DIV＆GT;
＆LT; DIV CLASS =飞行日期＆GT; {{departureFlight.arrivalTime |日期：EEE，MMM D，Y}}＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =COL-MD-偏移0 COL-MD-2＆GT; {{departureFlight.cityTo}}（{{departureFlight.flyTo}}）LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =连接NG-IF =departureFlight.transferFlight＆GT;
{{departureFlight.arrivalTime |日期：H：MM}}小时的等待
＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT;
＆LT; DIV CLASS =COL-MD-6＆GT;入站 ＆LT; DIV CLASS =跳闸NG-重复=returnFlight在ticket.route.returnFlights＆GT; ＆LT; DIV CLASS =飞行对齐底＆GT;
＆LT; DIV CLASS =日期 - 时间COL-MD-偏移2 COL-MD-3＆GT;
＆LT; DIV CLASS =飞行时间＆GT; {{returnFlight.departureTime |日期：H：MMA}}＆LT; / DIV＆GT;
＆LT; DIV CLASS =飞行日期＆GT; {{returnFlight.departureTime |日期：EEE，MMM D，Y}}＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =COL-MD-偏移0 COL-MD-2＆GT; {{returnFlight.cityFrom}}（{{returnFlight.flyFrom}}）LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =飞行路线＆GT;
＆LT; DIV CLASS =飞行路线＆GT;
＆LT; DIV CLASS =飞行时间＆GT; {{returnFlight.arrivalTime，returnFlight.departureTime |日期：H：MM}} hr的; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =飞行对齐底＆GT;
＆LT; DIV CLASS =日期 - 时间COL-MD-偏移2 COL-MD-3＆GT;
＆LT; DIV CLASS =飞行时间＆GT; {{returnFlight.arrivalTime |日期：H：MMA}}＆LT; / DIV＆GT;
＆LT; DIV CLASS =飞行日期＆GT; {{returnFlight.arrivalTime |日期：EEE，MMM D，Y}}＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =COL-MD-偏移0 COL-MD-2＆GT; {{returnFlight.cityTo}}（{{returnFlight.flyTo}}）LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =连接NG-IF =returnFlight.transferFlight＆GT;
{{returnFlight.arrivalTime |日期：H：MM}}小时的等待
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
CSS：
.searchResult {
填充左：15px的;
填充右：15px的;
填充顶：0像素;
填充底：0像素;
}.align伪底{/ *添加* /
显示：弯曲;
调整项目：柔性结束;
}
。往返 {
宽度：100％;
显示：内联柔性;
柔性方向：排;
调整项目：舒展;
}
.trip {
//宽度：100像素;
文本对齐：中心;
显示：弯曲;
柔性方向：列;
}
。飞行 {
空格：NOWRAP;
}
。约会时间 {
文本对齐：中心;
}
.flight路径{
位置：相对;
宽度：6像素;
最小高度：135px;
FLEX-增长：1;
调整自我：中心;
背景颜色：＃6090FF;
}.flight持续时间{
位置：绝对的;
顶部：50％;
变换：translateY（-50％）;
空格：NOWRAP;
背景：RGBA（255，255，255，.75）在;
文本对齐：中心;
左：-15px;
}■连接{
高度：40像素;
调整自我：中心;
宽度：70像素;
颜色：红色;
边框：1px的固体红色;
显示：弯曲;
柔性方向：列;
证明内容：中心;
}
您没有按照我原来的答复，你再次插入块元素，他们不应该，从而打破了Flexbox的。
请参阅此 plunker ，采用了棱角分明的纳克-repeat-开始/结束来消除不必要的＆LT; DIV＆GT; 和没有违反Flexbox的
关键变化是：
＆LT; DIV CLASS =COL-MD-6之旅＆GT;出站
＆LT; DIV CLASS =飞行对齐底
NG-重复启动=departureFlight在ticket.route.departureFlights＆GT;
I am really not sure if I am on the right path... every time I find solution for my previous problem and later on when I integrate "fixed" code with something else it breaks again, so that made me think that I am doing something fundamentally wrong here. Thats why I am asking you to REVIEW and propose FIX or completele new SOLUTION for something that I plan to achieve.
I am trying to display a flight information and each route should be displayed the way you see on the picture.
Right now, it works but in some cases when Outbound flight has more connections than Inbound flight, flight path (blue line) gets interrupted and stays on the same level as second flight in the Outbound. I want in current scenario, blue path go all the way down and each Inbound/Outbound flight path length must be in sync and in respect to each other. (same length no matter how many connections each flight has)
Could you please help me to figure out, how do I fix or change entire architecture, solution, CSS, to draw a blue path line and keep Inbound and Outbound flights the same length no matter how many connections each of these has?
HTML:
<div class="roundtrip">
<div class="col-md-6">Outbound
<div class="trip" ng-repeat="departureFlight in ticket.route.departureFlights">
<div class="flight align-bottom">
<div class="date-time col-md-offset-2 col-md-3">
<div class="flight-time">{{departureFlight.departureTime | date:"h:mma"}}</div>
<div class="flight-date">{{departureFlight.departureTime | date:"EEE, MMM d, y"}}</div>
</div>
<div class="col-md-offset-0 col-md-2">{{departureFlight.cityFrom}} ({{departureFlight.flyFrom}})</div>
</div>
<div class="flight-path">
<div class="flight-path">
<div class="flight-duration">{{departureFlight.arrivalTime-departureFlight.departureTime | date:"h:mm"}}hr</div>
</div>
</div>
<div class="flight align-bottom">
<div class="date-time col-md-offset-2 col-md-3">
<div class="flight-time">{{departureFlight.arrivalTime | date:"h:mma"}}</div>
<div class="flight-date">{{departureFlight.arrivalTime | date:"EEE, MMM d, y"}}</div>
</div>
<div class="col-md-offset-0 col-md-2">{{departureFlight.cityTo}} ({{departureFlight.flyTo}})</div>
</div>
<div class="connection" ng-if="departureFlight.transferFlight">
{{departureFlight.arrivalTime | date:"h:mm"}}hr wait
</div>
</div>
</div>
<div class="col-md-6">Inbound
<div class="trip" ng-repeat="returnFlight in ticket.route.returnFlights">
<div class="flight align-bottom">
<div class="date-time col-md-offset-2 col-md-3">
<div class="flight-time">{{returnFlight.departureTime | date:"h:mma"}}</div>
<div class="flight-date">{{returnFlight.departureTime | date:"EEE, MMM d, y"}}</div>
</div>
<div class="col-md-offset-0 col-md-2">{{returnFlight.cityFrom}} ({{returnFlight.flyFrom}})</div>
</div>
<div class="flight-path">
<div class="flight-path">
<div class="flight-duration">{{returnFlight.arrivalTime-returnFlight.departureTime | date:"h:mm"}}hr</div>
</div>
</div>
<div class="flight align-bottom">
<div class="date-time col-md-offset-2 col-md-3">
<div class="flight-time">{{returnFlight.arrivalTime | date:"h:mma"}}</div>
<div class="flight-date">{{returnFlight.arrivalTime | date:"EEE, MMM d, y"}}</div>
</div>
<div class="col-md-offset-0 col-md-2">{{returnFlight.cityTo}} ({{returnFlight.flyTo}})</div>
</div>
<div class="connection" ng-if="returnFlight.transferFlight">
{{returnFlight.arrivalTime | date:"h:mm"}}hr wait
</div>
</div>
</div>
</div>
CSS:
.searchResult {
padding-left: 15px;
padding-right: 15px;
padding-top: 0px;
padding-bottom: 0px;
}
.align-bottom { /*added*/
display: flex;
align-items: flex-end;
}
.roundtrip {
width: 100%;
display: inline-flex;
flex-direction: row;
align-items: stretch;
}
.trip {
//width: 100px;
text-align: center;
display: flex;
flex-direction: column;
}
.flight {
white-space: nowrap;
}
.date-time {
text-align: center;
}
.flight-path {
position: relative;
width: 6px;
min-height: 135px;
flex-grow: 1;
align-self: center;
background-color: #6090FF;
}
.flight-duration {
position: absolute;
top: 50%;
transform: translateY(-50%);
white-space: nowrap;
background: rgba(255, 255, 255, .75);
text-align: center;
left:-15px;
}
.connection {
height: 40px;
align-self: center;
width: 70px;
color: red;
border: 1px solid red;
display: flex;
flex-direction: column;
justify-content: center;
}
You didn't follow my original answer, you again inserted block elements where they shouldn't be and thus broke the flexbox.
See this plunker, using angular's ng-repeat-start/end to remove unnecessary <div>s and not breaking the flexbox.
The key change is in:
<div class="col-md-6 trip">Outbound
<div class="flight align-bottom"
ng-repeat-start="departureFlight in ticket.route.departureFlights">
这篇关于需要HTML CSS定位解决方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
