替代顯示事件跟蹤器的flex

Question

我目前有一個事件跟蹤器使用html和css。我的問題是，由於瀏覽器兼容性問題，我想搭乘display: flex;。有沒有其他方法可以達到同樣的效果？我嘗試使用display:inline-block，因爲沒有flex所有的步驟都出現在不同的行中。

HTML：

<div class="container"> 
    <div class="row event"> 
    <div class="col-xs-3 event-step"> 
     <p class="event-stepnum">Step 1</p> 
     <div class="progress"> 
      <div class="progress-bar"></div> 
     </div> 
    </div> 
    <div class="col-xs-3 event-step complete"> 
     <p class="event-stepnum">Step 2</p> 
     <div class="progress"> 
      <div class="progress-bar"></div> 
     </div> 
    </div> 
    <div class="col-xs-3 event-step"> 
     <p class="event-stepnum">Step 3</p> 
     <div class="progress"> 
      <div class="progress-bar"></div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS：

.event > .event-step { 
    padding: 0; 
    position: relative; 
} 

.event > .event-step .event-stepnum { 
    color: #595959; 
    font-size: 16px; 
    margin-bottom: 5px; 
} 

.steps .step-on, 
.steps .step-done { 
    background-color: #1b7e28; 
    color: #1b7e28; 
    border: 1px solid transparent; 
} 

.progress { 
    position: relative; 
    border-radius: 0px; 
    height: 5px; 
    box-shadow: none; 
    margin: 20px 0; 
} 

.progress > .progress-bar { 
    width: 0px; 
    box-shadow: none; 
    background: #fbe8aa; 
} 

.event-step.complete > .progress > .progress-bar { 
    width: 100%; 
} 

.row { 
    display:flex; 
} 

JSFiddle Demo

Answer 1

只需更換display:flex通過display:inline-block，給你一步div的固定寬度：

.event > .event-step { 
    padding: 0; 
    position: relative; 
    width: 200px; 
} 
.row { 
    display: inline-block; 
} 

https://jsfiddle.net/onk2cqhg/