显示堆叠的多个子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%;
}

example on 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

DEMO ：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。这将为您提供所需的“堆叠”。