html - 显示堆叠的多个子 DIV

Question

我有一个进度条，它应该同时显示多个值，示例可能如下所示：

我不想要：

• 微调（如margin-top: -20px）
• 使用供应商前缀（如display: -webkit-inline-box;）

html:

<div id="progress">
  <div id="progress-buffer"></div>
  <div id="progress-time"></div>
</div>

CSS：

#progress {
  background: #333;
  height: 20px;
  width: 300px;
}
#progress-buffer {
  background: orange;
  width: 50%;
  height: 100%;
}
#progress-time {
  background: green;
  width: 25%;
  height: 100%;
}

jsfiddle 上的示例

Answer 1

这个怎么样，添加到你已经得到的。

#progress
{
    position:relative;
}

#progress-buffer, #progress-time 
{
    position:absolute;
}

第一个position:relative;确保后续position:absolute;是相对于#progress.

这是jsFiddle。

Answer 2

前段时间我回答了一个像你这样的问题：https ://stackoverflow.com/a/12186027/1529630

演示：http: //jsfiddle.net/VeJNt/5/

HTML：

<div id="loading_bar">
    <div id="buffer" style="width:40%"></div>
    <div id="progress" style="width:0.5%"></div>
    <!-- You can add as much as you want, but they
         must be sorted from wider to shorter  -->
</div>

CSS：

body {
  margin: 5px;
}

#loading_bar {
  border:1px solid #222;
  border-radius:7px;
  background-color:#666;
  width:660px;
  overflow:hidden;
  height:8px;
}

#buffer, #progress {
  border-radius:7px;
  height:100%;
  width:0%;
}

#buffer {
  box-shadow:1px 0 8px #000;
  background-color:#0474C0;
}

#progress {
  box-shadow: 0 0 8px #000;
  background-color:pink;
  margin-top:-8px;
}

Answer 3

最简单的方法就是添加 float: left; 到父级中的每个子级 div。这会给你你想要的“堆叠”。