Как сделать дочерние элементы текущими вне родительского?

Question

В настоящее время у меня есть HTML файл со структурой DOM так:

<div id="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

И я хочу, чтобы иметь макет так: «ребенок» дивы плавать вне родителя, выстраиваются в очередь, как ячейки таблицы в той же строке , каждый ребенок имеет большую ширину и меньшую высоту, чем родительский, и дочерние divs будут закрывать нижнюю часть родительского div. (Я не могу опубликовать изображение, поэтому могу описать его), это нужно сделать, не меняя Структура DOM.

Я попытался сделать дочерние элементы встроенными блоками и поплавать влево, но они, похоже, продолжают накапливаться, есть ли способ достичь этого, не меняя DOM?

Answer 1

Вы можете использовать абсолютное позиционирование вместо:

#parent{ 
    height:300px; width:300px; position:relative; 
} 
.child{ 
    height:100px; width:300px; position:absolute; 
} 
.child:first-child{ 
    left:-50px; 
} 

Конечно, это только часть CSS вам нужно.

Answer 2

Я бы рекомендовал использовать гибкий вместо:

display: flex 

Это более отзывчивыми, чем при использовании

display: block 
position: absolute 

HTML:

<div id="parent"> 
    <div class="child">hi</div> 
    <div class="child">hello</div> 
    <div class="child">hey</div> 
</div> 

CSS:

#parent { 
    display: flex; 
    flex-direction: row; 
    width: 400px; 
} 

.child { 
    flex-grow: 1; 
    height: 30px; 
    text-align: center; 
    color: white; 
} 

.child:nth-of-type(1) { 
    background:red; 
} 

.child:nth-of-type(2) { 
    background: green; 
} 

.child:nth-of-type(3) { 
    background: purple; 
} 

Вот пример от jsfiddle: https://jsfiddle.net/pbu05aaL/