Question

我在定位<div>元素时遇到问题。我有以下示例：https://jsfiddle.net/5tv4pyh0/1/

如您所见，第二个孩子位于第一个孩子的下方。我想要实现的是让第二个孩子与第一个孩子处于同一个顶部位置，只要它们不会相互溢出。如果第二个孩子有left: 30%，它应该出现在第一个孩子的下方。

对孩子们使用position: absolute也不起作用，因为两个孩子都可以拥有灵活的身高。我还尝试添加float: left，但不管我设置为left的是什么，这两个孩子总是彼此相邻。

我有什么建议可以达到预期的行为吗？

修改

我尝试创建一个像定位的网格，只需将x位置设置为子元素。然后，如果两个孩子具有相同的x位置或者第二个孩子具有在第一个孩子的宽度内的x位置，则第二个孩子应该出现在第一个元素的下方。如果第二个孩子在第一个孩子旁边有一个x位置，那么它应该位于同一个y位置。

谢谢，格里

Answer 1

在CSS中进行以下更改：你必须为子类添加display：inline-block并删除position：相同的相对属性

我为孩子的第一个孩子增加了80％的宽度，仅用于测试目的。

.container {
  width: 100%;
  position: relative;
}
.child {
  /*position: relative;*/
  border: 1px solid blue;
  width: 25%;
  margin-bottom: 10px;
  display: inline-block;
}
.child:first-child {
  width: 80%;
}

<div class="container">
  <div class="child" style="height: 50px; left: 10%;">child 1</div>
  <div class="child" style="height: 30px; left: 40%;">child 2</div>
</div>

CSS相对于父母和其他孩子的定位

1 个答案: