Question

目前我有一个带有DOM结构的html文件：

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

我希望有这样的布局：“child”div浮动在父级之外，像同一行中的表格单元格一样排列，每个孩子的宽度都比父级更大，高度也更小，而且他们的子级div将会覆盖父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

我建议改用flex：

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/

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

2 个答案: