Question

如何才能将两个div内联才能制作进度条？我想要的是，不管div的宽度是什么，它们都在一条线上

我正在使用bootstrap，我知道我可以在那里使用它，但在我的情况下，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/

Answer 1

制作进度条display:flex;的两个部分的父级。这将使两个div显示在同一行。

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

JSFiddle

Answer 2

在5010 5053 4951 5030 5034 5131 4895 5032 4974 5073 4947 5030 4939 5011 5069 4910 4992 4990 4946 4983，see this fiddle

上使用float: left;

.part-one

内联div来制作进度条

2 个答案: