从水平放置的div实现垂直结构

<style>
  .container {
    display: flex;
    flex-direction: column;
  }
</style>

<div class="container">
  <div>子元素1</div>
  <div>子元素2</div>
  <div>子元素3</div>
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: 1fr;
  }
</style>

<div class="container">
  <div>子元素1</div>
  <div>子元素2</div>
  <div>子元素3</div>
</div>

<style>
  .container {
    display: inline-block;
  }
  .child {
    transform: translateY(50%);
  }
</style>

<div class="container">
  <div class="child">子元素1</div>
  <div class="child">子元素2</div>
  <div class="child">子元素3</div>
</div>