html - 将 div 相互对齐并在列内创建列

问题描述

我正在尝试做一个步骤栏（有点），它必须与后端给出的未定义数量的操作系统步骤一起使用。到目前为止，我设法创建了这个

没关系（一些连接圆圈的条会很棒）。但是，在较小的屏幕上，我遇到了日期问题，因为文本分成了 2 行。

是否有可能使这些 div 始终相互对齐？ 我遇到的另一个问题是在较小的屏幕上......我想将文本与图标并排放置。对于这样的事情，我已经在主 div 中定义了 2 列（col-xs-6），但它不起作用。

更新1：感谢@prabesh-gouli，我能够解决其中一个问题：并排获取东西。日期的问题仍然存在（第二张图片）。

calculateClasses(data: string): string {
  if (data) {
    return 'icon col-xs-6 activeStep';
    else
      return 'icon col-xs-6 inactiveStep';
  }
}

estados = [{
    texto: "Inscrito",
    data: "01/07/2020 12:00H"
  },
  {
    texto: "Atendido",
    data: "02/07/2020 12:00H"
  },
  {
    texto: "Em Processamento",
    data: "03/07/2020 12.00H"
  },
  {
    texto: "Aguarda Revisão",
    data: "04/07/2020 12.00H"
  },
  {
    texto: "Concluído",
    data: "05/07/2020 12.00H"
  },
  {
    texto: "Entregue",
    data: ""
  }
];

.step {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.stepDate {
  display: inline-block;
  margin-top: 5px;
  align-self: flex-end;
}

.stepText {
  word-wrap: normal;
  font-weight: bold;
  font-size: 17px;
}

.icon {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  font-size: 25px;
}

.activeStep::before {
  border: 2px solid #1678e9;
  background: #1678e9;
  font-family: "Material Icons";
  content: "\e876";
  color: #fff;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
}

.inactiveStep::before {
  border: 2px solid #C5CAE9;
  background: #C5CAE9;
  font-family: "Material Icons";
  content: "\e14c";
  color: #fff;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 575px) {
  .step {
    display: flex;
  }
  #stepInfo {
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    text-align: start;
  }
  .icon {
    margin-left: auto;
    margin-right: auto;
    width: 40%;
  }
  .inactiveStep::before {
    margin-right: 15%;
  }
  .activeStep::before {
    margin-right: 15%;
  }
}

<div class="row d-flex justify-content-center">
  <div class="step col-sm-4 col-md-2" *ngFor="let estado of estados">
    <div [ngClass]="calculateClasses(estado.data)"></div>
    <div id="stepInfo">
      <div class="stepText">{{ estado.texto }}</div>
      <div class="stepDate" *ngIf="estado.data">{{ estado.data }}</div>
    </div>
  </div>
</div>

标签： htmlcssangular

html - 将 div 相互对齐并在列内创建列

问题描述

解决方案

推荐阅读