html - CSS 相对于 parent 和其他 child 的定位

Question

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

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

使用 position: absolute对于 children 也不起作用，因为两个 child 都可以有一个灵活的高度。我还尝试添加 float: left但是不管我设置什么left，两个 child 总是出现在彼此旁边.

有什么关于如何实现所需行为的建议吗？

编辑:

我正在尝试创建一个类似于定位的网格，仅将 x 位置设置为子元素。然后，如果两个子元素具有相同的 x 位置，或者第二个子元素的 x 位置在第一个子元素的宽度范围内，则第二个元素应出现在第一个元素的下方。如果第二个 child 的 x 位置紧挨着第一个 child ，则它应该位于相同的 y 位置。

谢谢，格里

Answer 1

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

为了测试目的，我为 child 的第一个 child 添加了 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>