在其他img旁边的垂直堆栈中显示img元素？ [关闭]答案

【问题标题】：Display img elements in vertical stack next to other img? [closed]在其他img旁边的垂直堆栈中显示img元素？ [关闭]
【发布时间】：2016-11-10 12:03:02
【问题描述】：

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

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

【问题讨论】：

标签： css image alignment css-float

【解决方案1】：

做到这一点的一种方法是在容器div 中有两个孩子divs。一个应该是img1，另一个应该包含其他三个，其中还应该有display: block; 才能正常工作（img2、img3 和 img 4）。 p>

将float: left; 放在img1 和float: right 放在三个较小的container 上。
为了安全起见，请再次使用img1 和新的container：vertical-align: middle。
如果容器也有固定尺寸，那就更容易了。

图片：

【讨论】：

谢谢，我会试试这个。我从没想过，但我认为它应该有效。
欢迎您。它会工作的。尝试对齐两个元素比对齐五个元素更容易。

【解决方案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>

【讨论】：