Question

我的html页面上的右边Div只包含一些thumnails行 - 在javascript中动态创建 - 而左边Div包含3个垂直排列的Sub-Divs（内部Div）（也是在接收我的查询结果时动态创建的） web服务）

为了让它看起来平衡，我想要左侧Div自动调整到相同的高度作为正确的（保存动态插入的缩略图）。

左边Div中的3个垂直对齐的Sub-Div应该表现得像这样：

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

带有标题文字的Div1应该在Div2

上方的空格中垂直居中

带有标题文字的Div3应垂直居中于Div2

下方的空白处

问题：

用css可以吗？ - 即没有计算javascript中动态创建的高度

如果可以用css 那么，请给我一些提示关于哪个浮动，显示，对齐，边距（和类似）设置我可以尝试左侧的Container Div和它的3个内部Div。

我不需要获取样本或解决方案。但我需要用简单的词语，一些想法提供一些提示我可以试试，以及我应该遵守的一些考虑因素（tipps）。

提前多多感谢。

Answer 1

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

＆＃13;

.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; }

＆＃13;

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

＆＃13;

Answer 2

我会将同一个类添加到所有三个div中。在您的CSS中，添加margin: 10px auto;根据当前代码，您可能还需要将position: relative添加到此类。

您可以调整10px部分，具体取决于您想要的距离。自动将div放在其父级中心。

就更改订单而言，请查看订单上的w3 schools documentation

html5垂直对齐3个等距均匀

2 个答案: