在其他img旁边的垂直堆栈中显示img元素？

Question

我正在尝试显示一组这样的img元素：

我尝试在IMG 1上使用float：left并且在其他IMG上浮动：但是它们没有垂直排列。我该怎么做？

Answer 1

执行此操作的一种方法是在容器divs 中有两个孩子div。一个应该是img1而另一个应该包含其他三个，它们也应该display: block;才能正常工作（ img2，img3和img 4 ）。

• 将float: left;放在img1上，将float: right放在三个较小的container上。

• 为安全起见，请再次放在img1和新container上：vertical-align: middle。

• 如果容器也有固定的尺寸，它会更容易。

图片：

Answer 2

Flexbox应该可以使用它。

首先，在父容器上设置display: flex和align-items: center。

其次，在右侧容器上设置display: flex然后flex-direction: column。

图像将垂直对齐。

＆＃13;

＆＃13;

.container {
  display: flex;
  align-items: center;
}

.left {
  margin-right: 10px;
}

.right {
  display: flex;
  flex-direction: column;
}
.right img {
  margin: 5px 0;
}

＆＃13;

<div class="container">
  <div class="left">
    <img src="http://placehold.it/320">
  </div>
  <div class="right">
    <img src="http://placehold.it/150x100">
    <img src="http://placehold.it/150x100">
    <img src="http://placehold.it/150x100">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;