如何将两个水平div放在垂直div旁边？

Question

我想把我的东西对齐为:

????????????????????????????????????????
? No ?  Some possible long content     ?
?    ???????????????????????????????????
?    ?  Not so long stuff              ?
????????????????????????????????????????

使用表将使用5分钟,rowspan=2但使用div我不知道从哪里开始.我认为应该使用div,因为这不是表格数据.只是一种布局计数器的方式,一种可能的单独标题及其副标题(不长):

<div id="container">
    <div class="div1">No</div>
    <div class="div2">Some possible long content</div>
    <div class="div3">Not so long stuff</div>
</div>

1宽度是常量但其高度应该是2和3高度的总和. 3始终包含一行代码但2可能包含多1行.

任何帮助表示赞赏

Answer 1

如果您可以更改HTML结构以包装右侧div,则flexbox可以执行此操作.

.container {
  width: 50%;
  margin: auto;
  border: 1px solid grey;
  display: flex;
}
.div1,
.right {
  display: flex;
  flex-direction: column;
}
.div1,
.right > div {
  padding: 1em;
}
.div1 {
  background: orange;
}
.div2 {
  background: pink;
}
.div3 {
  background: lightblue;
}

<div class="container">
  <div class="div1">No</div>
  <div class="right">
    <div class="div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet explicabo omnis, suscipit laborum officiis, eius sint ipsam doloremque magnam reiciendis corporis repudiandae ducimus laboriosam ex! Porro dolores aut vitae. Assumenda ut laborum dolor
      fugiat ullam nihil enim sapiente ex vel praesentium quo dolores distinctio, aliquid perferendis non accusamus dolorum excepturi?</div>
    <div class="div3">Not so long stuff</div>
  </div>
</div>