javascript - html5 垂直对齐 3 个 Div 等间距

Question

我的 html 页面上的右侧 Div 仅包含一些缩略图行 - 在 javascript 中动态创建 - 而左侧 Div 包含 3 个垂直排列的 Sub-Div(内部 Div)(也是在收到我的查询结果时动态创建的网络服务)

为了让它看起来平衡，我想要左div自动调整到相同高度作为正确的(包含动态插入的缩略图)。

左侧 Div 中的 3 个垂直对齐的 Sub-Div 应如下所示:

具有较大图像的 Div2 应垂直居中

带有标题文本的 Div1 应在 Div2 上方的空间中垂直居中

带有标题文本的 Div3 应在 Div2 下方的空间中垂直居中

.

问题:

这可以用 css 实现吗？- 即在 javascript 中不计算动态创建的高度

.

如果这可以用 css那么，请给我一些提示关于哪些 float 、显示、对齐、边距(和类似的)设置我可以尝试左侧的 Container Div 及其 3 个内部 Div。

我不需要分别获取样本或解决方案。但我需要一些简单的提示，一些想法我可以尝试一下，以及我应该遵守的一些注意事项 (tipps)。

非常感谢。

Answer 1

Flexbox 可以满足你的需求:
jsfiddle:https://jsfiddle.net/ornx7oar/

.main {
  display: flex;
}

.left-panel {
  padding: 5px; margin-right: 5px;
  background-color: green;
  /*width: 30%;*/
  flex: 0 0 30%; /* don't grow or shrink based on contents, 30% width (put auto if you prefer to use the width property) */
  display: flex;
  flex-direction: column; /* align vertically */
  justify-content: space-around; /* center vertically */
}

.right-panel {}

.thumb {height: 70px; width: 150px; border: 1px solid; display: inline-block;}

* { box-sizing: border-box; margin: 0; }

<div class="main">
  <div class="left-panel">
    <div>first</div>
    <div>second</div>
    <div>third</div>
  </div>
  
  <div class="right-panel">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
  </div>
</div>