CSS несколько относительных divs с абсолютно позиционированными дочерними элементами

Question

У меня возникли проблемы с созданием (несколько странным) макетом, и я не могу найти пример где-либо точно, что я пытаюсь сделать.

Я хотел бы макет несколько блоков, которые выглядят следующим образом:

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

, где все элементы .item находятся на вершине друг друга, но .rel элементы макета обычно так все они видны. Важно отметить, что все элементы .item внутри .rel будут иметь одинаковую длину, но они могут быть любой длины, поэтому они могут быть перенесены на новую строку. Вот образ того, что я пытаюсь сделать:

Я создал this CodePen.

Я бы очень признателен за некоторые рекомендации и понимаю, что я могу покончить с этим совершенно неправильно. Спасибо за любую помощь!

РЕШЕНИЕ

В случае, если кто-то считает себя нуждаясь это действительно странное расположение: CodePen

Answer 1

Я являюсь не совсем уверен, что вы пытаетесь достичь, но это, кажется, что вы хотите <div class="item"> для отображения встроенного. вы можете использовать float=left или display=inline-block вместо абсолютного позиционирования. теперь ваши divs находятся на вершине друг друга. Что-то похожее на это

<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

Answer 2

Используйте это по пункту

display: table-cell; 

и это на отн

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;