在块中显示2 div，在它们旁边显示垂直div

Question

我正在尝试设计一个3个图像的部分。我可以轻松地通过块显示两个图像。我可以将第三张图像浮动到右边并轻松调整高度。然而，我的问题是它没有并排排列。下面是我想要实现的一个例子

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

这是一个有效的例子：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用flexbox：

.container {
  display: flex;
  flex-direction: column;            /* align items in columns */
  flex-wrap: wrap;                   /* wrap to a new column when height is reached */
  justify-content: space-between;    /* add spacing in  between top and bottom image */
  height: 210px;                     /* height of your 2 images plus and spacing you want */
  width: 510px;                      /* width of 2 columns plus any spacing */
}

.image-one,
.image-two {
  width: 250px;
  height: 100px;
  background-color: green;
  display: block;
}

.image-three {
  background-color: lightblue;
  width: 250px;
  height: 210px;                 /* I would make this image the height of the other 2 plus spacing */
  align-self:flex-end;           /* align this to the right of the container */
}

<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 3

也许你可以像这样添加一些内部div：

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

然后，将css添加到container-left和container-right以正确设置宽度和浮动。像这样：

.container-left, .container-right{
    width:250px;
    float:left;
}

Answer 4

为什么不使用bootstrap列？

<强> HTML

<div class="container">
 <div class="row main-row">
  <div class="col-6 left-col">
    <div class="row left-col-top">
     <!-- Top left image here -->
    </div>
    <div class="row left-col-bottom">
     <!-- Bottom left image here -->   
    </div>
  </div>
  <div class="col-6 right-col">

  </div>
 </div>
</div>

<强> CSS

.main-row {
   height:300px;
}

.left-col-top {
 background-color:blue;
 height:50%;
}
.left-col-bottom {
 background-color:red;
 height:50%;
}
.right-col {
 background-color:green;
 height:100%;
}

Answer 5

Easy flexbox解决方案：）

#main, #left {
  display:flex;
}

#left {
  flex-direction: column;
  flex: 1;
}

.section {
  flex: 1;
  margin: 2px;
  background-color: green;
}

<div id="main">
  <div id="left">
    <div class="section">Hello</div>
    <div class="section">Hello</div>
  </div>
  <div id="right" class="section">Hello</div>
</div>