html - 将 2 个 div 对齐并向右对齐

Question

我需要做的事情解释起来有点复杂，但我会尽力而为。我需要在一页中放置 3 个不同的 div，但我的左侧 div 需要比其他 div 有更多的空间，因此并排对齐是不切实际的，因为一个在彼此之上。我需要在左侧放置一个更大的 div，在右侧将另外两个堆叠在一起。但我不能将这两个 div 合并为一个并 float 它。因为我需要顶部的垂直对齐到左侧的顶部，底部的垂直对齐到左侧的底部，而这 2 个(顶部和底部)需要在它们的右侧对齐。不确定我是否能够解释，所以这里有一张图片说明了我想要完成的事情:

所以，你看，左边的占据了大部分空间，较小的在顶部和底部对齐，同时也在它们的右侧对齐，然后之间有一个空白。这是我已有的代码:

<div style="display: inline-block;">
  <h3>Left Div</h3>
  <input type="text" name="name">
  <input class="button" type="submit">
</div>

<div style="display: inline-block; vertical-align: top; width: auto; padding-left: 20px">
  <h3>Top right div</h3>
  <input type="text" name="name2">
</div>

<div style="display: inline-block; vertical-align: bottom; width: auto; padding-left: 20px;">
  <h3>Bottom right div</h3>
  <input type="text" name="name3">
  <input class="button" type="button" onclick="window.location.replace('url')" value="Cancel">
</div>

我还想说，在中途(当我只有 2 个 div 时)它按照我想要的方式工作，当我添加第三个 div 时出现了问题，所以我认为这就是问题在。请注意，我是 html 的新手，如果这只是一个简单的修复，我很抱歉。

Answer 1

我觉得关键是等高部分，可以用CSS3 flexbox来解决。对于右侧顶部/底部 div，您可以将两个 div 包装到另一个 div 中。请参阅下面的简单演示。

jsFiddle

div {
  border: 1px solid aqua;
}
.container {
  display: flex;
}
.left, .right {
  flex: 1;
}
.right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<div class="container">
  <div class="left">
    <h3>Left Div</h3>
    <br><br><br><br><br><br><br><br><br><br>
  </div>
  <div class="right">
    <div>
      <h3>Top right div</h3>
    </div>
    <div>
      <h3>Bottom right div</h3>
    </div>
  </div>
</div>