進捗バーを作成するためのインラインdivs

Question

プログレスバーを作成するには、2つのdivをインラインに配置するにはどうすればよいですか？ divの幅に関係なく1つの行にまとめることが望ましい

私はブートストラップを使用していますが、私はそこに1つを使用できることを知っていますが、私の場合はブートストラップの1つがプロジェクトに役立たない。 .part-one上

<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/

Answer 1

使用float: left;、see this fiddle

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

Answer 2

プログレスバーdisplay:flex;の2つの部分の親を作成します。これにより、両方のdivが同じ行に表示されます。

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

JSFiddle