HTML CSS自动调整高度

我试图通过使用CSS/LESS可视化显示出站和入站航班。问题是，当出境航班有更多的机场变化，然后入境然后线保持在第一班的水平。我想根据最长的路线动态调整高度。HTML CSS自动调整高度

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

UPDATE钠的制备：Plunker例子（使屏幕宽，以便正确地看到它）

这是我有：

这是我想达到：

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>

来源

2015-09-06 Wild Goat

嗨。你有没有工作片段或小提琴？ –

我会尽力准备，只需一秒钟。 –

@PraveenKumar，我已经准备好了笨蛋的例子。 http://plnkr.co/edit/XLXnnXXYPtC4c50b7Hj6?p=preview –

这只是尖叫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 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>

来源

2015-09-06 20:50:32 Amit

艾米特，非常感谢你的回答，它看起来很有表现力，我喜欢它。我可能在这里很简单，因为我不是一个CSS/LESS专家，但你认为上面的重构我的解决方案，使用你的演示方式可能会有问题吗？我应该首先看什么？ –

我看了一下你发布的重要邮件，很难确切地说出那里有什么“错误”，因为筛选过多的标记。我认为你有一些元素是'display：block'，并且也会受益于flexbox。我会从一个更干净的石板开始（如果您愿意，可以使用我的碎片），然后慢慢添加特征（UI元素）并查看破坏设计流程的原因。希望或者什么都不会，或者至少你能够指出问题并解决它（或者再次来到:-) – Amit

这真棒！ '：）' –

HTML CSS自动调整高度

回答

相关问题