时间戳

首页 > 解决方案 > 在不同的 div 之间对齐内部 div 项

javascript - 在不同的 div 之间对齐内部 div 项

问题描述

我想对齐属于一起但位于不同 div 容器中的项目。我不确定这是否可能，但我的问题是我无法更改我拥有的 html 模板的结构。

图片

我目前的状态是这张图片的顶部。我想要达到的结果是底部。没有边框的左侧项目是我的行标题。我想对齐属于一起的项目，以便每个主要项目（G1，G2）都有一行，正如您在底部添加 CSS 中的边距所看到的那样。所以结果应该是两条泳道。我的问题是单元格中的项目数量是动态加载的，并且可以随时间变化。

主要问题是我不能对 html 模板进行太多更改，因此我必须使用单元结构。这可能与动态数量的项目相关吗？

我在 Angular 应用程序中使用它。所以应该可以使用任何Javascript。

我已经创建了这个 codepen 作为示例。 Codepen 示例或Angular Stackblitz

html

<div class="outer">
  <div class="groups">
    <div class="groupItem">> G1</div>     
    <div class="groupItem">> G2</div> 
 </div>
<div class="container">
  <div class="cell">
    <div class="group1">G1</div> 
    <div class="group1">G1</div>         
  </div>
  <div class="cell">
    <div class="group1">G1</div>
    <div class="group1">G1</div>
    <div class="group1">G2</div>        
  </div>
  <div class="cell">
    <div class="group1">G1</div> 
    <div class="group2">G2</div>       
  </div>
  <div class="cell">
    <div class="group1">G1</div>  
    <div class="group2">G2</div>      
  </div>
  <div class="cell">
    <div class="group1">G1</div>
    <div class="group2">G2</div>        
  </div>
  <div class="cell">
    <div class="group1">G1</div>
    <div class="group2">G2</div>        
  </div>
  <div class="cell">
    <div class="group2">G2</div>       
  </div>
</div>

CSS

.outer {
  display: flex;
}

.groups {
  padding-top: 20px;
  margin-right: 1px;
}

.container {
  display: flex;
}

.cell {
  padding: 20px;
  border: 1px solid #000;
}

标签： javascripthtmlcssangular

解决方案

这是一个解决方案。要点基本上是找到任何单元格可能具有的最大 group1 元素数。然后根据最大值减去每个单元格中 group1 元素的数量来调整第一个 group2 元素的填充顶部。请参阅下面的代码片段。

const cells = document.getElementsByClassName("cell")

// Find the max number of group1 elements
let maxGroup1 = 0
for (let cell of cells) {
    const group1 = cell.getElementsByClassName("group1")
  maxGroup1 = Math.max(maxGroup1, group1.length)
}

// For each cell, adjust group2 padding top accordingly 
for (let cell of cells) {
    const group1Length = cell.getElementsByClassName("group1").length
  const group2PaddingTop = (maxGroup1 - group1Length) * 20
  const group2 = cell.getElementsByClassName("group2")
  if (group2.length > 0) {
    group2[0].style.paddingTop = group2PaddingTop + "px"
  }
}

// Adjust the groups label
const labels = document.getElementsByClassName("groupItem")
const groupLabelPaddingTop = (maxGroup1 - 1) * 20
labels[1].style.paddingTop = groupLabelPaddingTop + "px"
.outer {
  display: flex;
}

.groups {
  padding-top: 20px;
  margin-right: 1px;
}

.container {
  display: flex;
}

.cell {
  padding: 20px;
  border: 1px solid #000;
}

.cell div, .groups div {
  height: 20px;
}
<div class="outer">
  <div class="groups">
    <div class="groupItem">> G1</div>     
    <div class="groupItem">> G2</div> 
 </div>
<div class="container">
  <div class="cell">
    <div class="group1">G1</div> 
    <div class="group1">G1</div>         
  </div>
  <div class="cell">
    <div class="group1">G1</div>
    <div class="group1">G1</div>
    <div class="group2">G2</div>        
  </div>
  <div class="cell">
    <div class="group1">G1</div> 
    <div class="group2">G2</div>       
  </div>
  <div class="cell">
    <div class="group1">G1</div>  
    <div class="group2">G2</div>      
  </div>
  <div class="cell">
    <div class="group1">G1</div>
    <div class="group2">G2</div>        
  </div>
  <div class="cell">
    <div class="group1">G1</div>
    <div class="group2">G2</div>        
  </div>
  <div class="cell">
    <div class="group2">G2</div>       
  </div>
</div>

推荐阅读