html - 内联div制作进度条

<分区>

如何将两个 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/

最佳答案

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

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

JSFiddle

关于html - 内联div制作进度条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36825813/

上一篇：javascript - 禁用无法按预期工作的触摸设备上的点击链接

下一篇：css - meteor :body backgroundimage

相关文章：

html - 彼此相邻的 float div

javascript - Bootstrap TypeAhead.js 防止无效输入

javascript - 如何通过 JavaScript 动态增加输入控制......？

javascript - 给 Canvas 添加点击事件或制作区域图

javascript - 如何使用 javascript 为 webkit 滚动条编写 css？

javascript - 如何使用 jQuery 选择下拉列表的值

html - 如何防止背景颜色延伸到 Bootstrap 中的装订线区域？

html bootstrap nav 品牌形象标识问题

html - 如果有足够的空间，为什么我的 float 元素会在较小的分辨率下中断？

javascript - 如何使表单和按钮内联？