将两个div对准一行，但它们不在同一元素中

Question

我在这里写一个示例：https：//jsfiddle.net/1631pndx/2/

这两个元素属于两个不同的div。但是我想一行向他们展示。并且不改变其他元素。没有JavaScript，只需通过CSS，如何执行此操作？

.container_1,
.container_2,
.container_3 {
  min-width: 200px;
  min-height: 200px;
  border: solid 2px lightblue;
  margin: 10px;
}
.container_2 {
  border: solid 2px gray;
}
.container_3 {
  border: solid 2px chocolate;
}

<div class="container_1">
  <h3> 1st element </h3>
</div>
<div class="container_2">
  <p> some other elements</p>
  <div class="container_3">
    <p> some other elements</p>
    <h3>2nd element</h3>
    <h4>[The 1st element should in here]</h4>
  </div>
</div>

Answer 1

如果每个元素的内容都是动态的，这将非常困难（也许是不可能），并且容易出错。

在您概述的情况下，内容相对固定。如果是这种情况，我们可以将position: absolute与固定的top和left属性一起使用。这样的东西：

.container_1,
.container_2,
.container_3 {
  min-width: 200px;
  min-height: 200px;
  border: solid 2px lightblue;
  margin: 10px;
}
.container_1 {
  position: absolute;
  top: 148px;
  left: 32px;
  width: calc(100% - 88px);
}
.container_2 {
  border: solid 2px gray;
}
.container_3 {
  border: solid 2px chocolate;
  min-height: 310px;
}

<div class="container_1">
  <h3> 1st element </h3>
</div>
<div class="container_2">
  <p> some other elements</p>
  <div class="container_3">
    <p> some other elements</p>
    <h3>2nd element</h3>
    
  </div>
</div>

再次，如果内容以任何方式动态，这意味着它的高度与上面的示例不同，则需要调整各种bottom和min-height属性。