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

Question

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

我尝试在 IMG 1 上使用 float: left，在其他 IMG 上使用 float: right，但它们没有垂直排列。我该怎么做？

Answer 1

实现此目的的一种方法是 在容器 div 中放置两个 child divs。一个应该是 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。

图像将垂直对齐。

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

.left {
  margin-right: 10px;
}

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

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

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

Display img elements in vertical stack next to other img?

css

image

alignment

css-float