html - 在 block 中显示 2 个 div，在它们旁边显示垂直 div

Question

我正在尝试设计一个包含 3 个图像的部分。我可以轻松地让两个图像按 block 显示。我可以将第三张图片向右浮动并轻松调整高度。但是我的问题是它没有并排对齐。下面是我想要实现的示例

这是我到目前为止的一个例子

.image-one,
.image-two {
  width: 250px;
  background-color: green;
  display: block;
  margin-top: 10px;
}

.image-three {
  float: right;
  background-color: lightblue;
  width: 250px;
  height: 200px;
}

<div class="container">
  <div class="image-one">Hello</div>
  <div class="image-two">Image two</div>
  <div class="image-three"> Image three </div>
</div>

Answer 1

您应该能够简单地将 flex 添加到容器中，然后在左右 div 中添加内容。

这是一个工作示例:

.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

.image-one,
.image-two {
  width: 250px;
  height: 95px;
  background-color: green;
  margin-bottom: 10px;
}

.image-three {
  background-color: lightblue;
  width: 240px;
  height: 200px;
  margin-left: 10px;
}

<div class="container">
  <div class="left">
    <div class="image-one">Hello</div>
    <div class="image-two">Image two</div>
  </div>
  <div class="right">
    <div class="image-three"> Image three </div>
  </div>
</div>