html - 如何让子元素流出父元素？

Question

目前我有一个 DOM 结构如下的 html 文件:

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

我想要这样的布局:“子”div 漂浮在父级之外，像同一行中的表格单元格一样排列，每个子级的宽度都比父级大，高度小，它们的子级 div 会遮住父div的底部。(我还不能发图，所以只能描述一下)，这必须在不改变DOM结构的情况下完成。

我尝试让子元素内联 block 并向左浮动，但它们似乎一直在堆积，有没有办法在不改变 DOM 的情况下实现它？

Answer 1

您可以改用绝对定位:

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

当然，这只是您需要的 CSS 的一部分。