以花朵形状对齐图像响应

Question

我有 4 个图标，它们应该像下图一样对齐。

我试图首先将它们放入一个带有 class 的<div>中，它控制着 position。现在据我所知，我会给每个图像一个绝对的 position，但这不会起作用，因为在每个 res. 我的图像不在一起，到处都是。 如何以响应方式将我的图像像“花”一样对齐。

Answer 1

我刚刚重新创建了您在上面发布的内容。 当您指定您真正需要的东西时，我可以帮助您

 .main { display: flex; height:100%; align-items:center }.sec{ height: 50px; width: 50px; border:1px solid black }

 <div class="main"> <div class="sec"></div> <div class="sec2"> <div class="sec"></div> <div class="sec"></div> </div> <div class="sec"></div> </div>

Answer 2

对于响应式布局，您可以使用 CSS 网格：

 .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); width: 50vw; aspect-ratio: 3 / 2; }.container>div { aspect-ratio: 1 / 1; border: 1px solid black; box-sizing: border-box; }.container>div:nth-child(1) { grid-column: 1; grid-row: 2 / span 2; }.container>div:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }.container>div:nth-child(3) { grid-column: 3; grid-row: 2 / span 2; }.container>div:nth-child(4) { grid-column: 2; grid-row: 3 / span 2; }

 <div class="container"> <div></div> <div></div> <div></div> <div></div> </div>

显然将容器宽度设置为您需要的宽度。

此代码段从最左侧的 div 开始以顺时针方式设置 div。

Answer 3

需要创建 3 列包裹在弹性容器中并垂直对齐

.wrapper {
  display: flex;
}

.column {
  align-items: center;
}