內聯div製作進度條

如何將內聯兩個div來製作進度條？我希望不管寬度divs他們在一條線保持在一起內聯div製作進度條

我使用bootstrap，我知道我可以使用那裏，但在我的情況下，引導不幫助我的項目。

<div class="container"> 
    <div class="col-xs-12 col-lg-4"> 
     <div class="panel panel-chart"> 
      <div class="panel-heading naranja"> 
       <h3 class="panel-title">Panel</h3> 
      </div> 
      <div class="panel-body"> 
       <p>Title</p> 
       <div class="col-xs-12 col-lg-12"> 
        <div class="progress-line azul part-one" style="width:70%"></div> 
        <div class="progress-line amarillo part-two" style="width:30%"></div> 
       </div> 
      </div> 
     </div> 
    </div>

https://jsfiddle.net/s5m9hb0g/

來源

2016-04-24 Ana Gonzalez

替代的解決方案是使剩餘的背景一個格的進展：https://jsfiddle.net/s5m9hb0g/3/ –

但在這種情況下，如果我想3節發生了什麼？ @勞倫斯約翰遜 –

那麼，這是一個不同的問題。 :)如果是我，我會使用flex方法，表格或絕對定位，具體取決於您希望三者如何工作以及您的目標瀏覽器要求是什麼。 –

上.part-one使用float: left;，see this fiddle

.part-one{ 
    border-bottom-left-radius: 10px; 
    border-top-left-radius: 10px; 
    float: left; 
}

來源

2016-04-24 16:27:32

非常感謝！ –

很高興幫助，歡迎您:) –

製作進度條display:flex;的兩個部分的父。這將使兩個div顯示在同一行上。

.panel-body .col-xs-12{ 
    display:flex; 
}

JSFiddle

來源

2016-04-24 16:27:53 Wowsk

內聯div製作進度條

回答

相關問題