CSS多个相对div与绝对定位的孩子

Question

我在创建一个（有些奇怪的）布局时遇到了一些麻烦，我无法找到一个与我想要做的完全相同的例子。

我想布局多个看起来像这样的块：

 <div class="rel">
     <div class="item">--- a</div>
     <div class="item">- b</div>
     <div class="item">c</div>
 </div>

其中所有.item元素都在彼此之上，但.rel元素布局正常，因此它们都是可见的。重要的是要注意.rel中的所有.item元素的长度完全相同，但它们可以是任意长度，因此它们可能会换行。这是我想要做的事情的图像：

我创建了this CodePen。

我真的很感激一些指导，并意识到我可能会以完全错误的方式解决这个问题。谢谢你的帮助！

解

如果其他人发现自己需要这个真正奇怪的布局： CodePen

Answer 1

在项目

上使用此功能

display: table-cell;

并且在rel

上

display: inline-block;

看看这个小提琴。 http://jsfiddle.net/h8rzw65p/

总代码：

.container {
  width: 200px;
}

.item {
  color: white;
  background: gray;
  margin: .1em;
  top: 0px;
  left: 0px;
  display: table-cell;
}    

.rel-2 {
  top: 0px;
  left: 0px;
  width: 100%;
  background: steelblue;
  margin: .2em;
  display: inline-block;
}

或者代替表格单元格，您可以在项目上执行此操作：

float: left;

Answer 2

我不确定您要实现的目标，但似乎您希望<div class="item">显示内联。您可以使用float=left或display=inline-block代替绝对定位。你的div现在彼此重叠。 与此相似的东西

<div class="container">
  <div class="rel clearfix">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
  </div>
</div>

和

.container {
  width: 200px;
}
.rel {
  width: 100%;
  background: steelblue;
  margin: 1em;
  padding: 1em;
  position: relative; 
}
.item {
  color: white;
  background: gray;
  margin: .1em;
  float:left;
}
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }

.rel-2 {
  width: 100%;
  background: steelblue;
  margin: .2em;
  position: relative; 
}

在这里查看http://codepen.io/anon/pen/vEExvM